HTML Body Height 100％ - still百分比高度百分比不工作

我知道這是一個愚蠢的one..but設置HTML和身體標記的高度爲100％，調整填充和邊距爲0並沒有解決它！HTML Body Height 100％ - still百分比高度百分比不工作

Divs仍然沒有顯示正確的高度..僅限於其內容的高度。

這裏是我的代碼：

HTML

<!DOCTYPE html> 
<html lang="e"> 
<head> 
    <meta charset="utf-8" /> 

    <title>Musterportfoliovergleich</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="stylesheets/index.css" type="text/css"> 
    <!--<link rel="stylesheet" href="stylesheets/jquery.mobile.css" type="text/css">--> 

    <script type="text/javascript" src="javascripts/jquery.js"></script> 
    <script type="text/javascript" src="javascripts/jquery.mobile.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      console.log("Hello"); 
     }); 
    </script> 
</head> 

<body> 
    <div id="pieChartCont1" class="container"> 
     Pie Chart Container 1 
    </div> 

    <div id="barChartCont1" class="container"> 
     <div id="barChartCont"> 
      Bar Chart Container 
     </div> 

     <div id="recBut"> 
      recBut 
     </div> 
    </div> 

    <div id="pieChartCont2" class="container"> 
     Pie Chart Container 2 
    </div> 

    <div id="recCont" class="container"> 
     Recomendations Container 
    </div> 

    <div id="barChartCont2" class="container"> 
     Bar Chart Container 2 
    </div> 
</body> 
</html>

CSS

html, body{ 
width:100%; 
height:100%; 
margin:0; 
} 

#pieChartCont1{background-color:red} 
#barChartCont{background-color:green} 
#recBut{background-color:blue} 
#pieChartCont2{background-color:yellow} 
#recCont{background-color:purple} 
#barChartCont2{background-color:orange} 

@media 
only screen and (orientation:portrait){ 
.container{ 
    width:100% 
} 
#pieChartCont1{ 
    height:45% 
} 
#barChartCont1{ 
    height:10% 
} 
    #barChartCont{ 
     width:80%; 
     height:100%; 
     float:left; 
    } 
    #recBut{ 
     width:20%; 
     height:100%; 
     float:left 
    } 
#pieChartCont2{ 
    height:45% 
} 
#recCont{display:none} 
#barChartCont2{display:none} 
} 

@media 
only screen and (orientation:landscape) and (max-device-width:700px){ 
.container{ 
    height:100%; 
    float:left; 
} 
#pieChartCont1{ 
    width:45% 
} 
#barChartCont1{ 
    width:10% 
} 
    #barChartCont{ 
     width:100%; 
     height:80% 
    } 
    #recBut{ 
     width:100%; 
     height:20% 
    } 
#pieChartCont2{ 
    width:45% 
} 
#recCont{display:none} 
#barChartCont2{display:none} 
} 

@media 
only screen and (orientation:landscape) and (min-device-width:701px){ 
.container{ 
    width:50%; 
    height:50%; 
    float:left; 
} 
/*#pieChartCont1{}*/ 
/*#pieChartCont2{}*/ 
#recCont{ 
    clear:both 
} 
/*#barChartCont2{}*/ 
#barChartCont1{display:none} 
}

我想通了！ jQuery Mobile腳本只是混淆了視圖。

來源

2013-01-21 Omar Shazly

這是你的[期望]（http://jsfiddle.net/e4tNG/）。 –

這正是我想要的。它既不在我的桌面上工作，也不在我的iPhone上工作。代碼在cloud9上。 –

設置百分比最好不過。根據我的經驗，我寧願只是使用JavaScript函數來獲取頁面寬度和高度，並將div尺寸設置爲像素而不是百分比。將ID設置爲您要格式化的HTML元素，並使用document.getElementById來設置它們的大小。

var container = document.getElementById("container"); 
var barChartCont = document.getElementById("barChartCont"); 
//...and so on... 

var viewportwidth; 
var viewportheight; 

function resize() { 
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 

    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth, 
     viewportheight = window.innerHeight 
    } 

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
     viewportwidth = document.documentElement.clientWidth, 
     viewportheight = document.documentElement.clientHeight 
    } 

    // older versions of IE 

    else { 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
     viewportheight = document.getElementsByTagName('body')[0].clientHeight 
    } 

container.style.height = viewportheight+"px"; 
barChartCont.style.height = (0.8*viewportheight)+"px"; 
//and so on... 
}

此功能將獲得瀏覽器的高度和寬度。與

<body onload="resize()" onresize="resize()">

更換您的標記和這個函數將被調用時，頁面加載並再次呼籲每次頁面調整時間（更新您正在使用的<div>或任何HTML標籤的尺寸）。在這種方式你將有尺寸的實際像素，而不是百分比。

試試吧，讓我知道你是否有問題。我在編碼歷史中多次使用過這個腳本，它已成爲我的最愛，也是最常用的腳本之一。

來源

2013-01-21 16:50:39 Charles

謝謝！太糟糕了我需要至少15個聲望給你一個讚許：p乾杯 –

如果你喜歡我的回答，你現在可以標記爲「最佳答案」，然後等到你有15個代表後再回來：P – Charles

看看flexible box layout。如果您嘗試在某些百分比的高度佈置具有面板的應用程序，它應該對您更好。

來源

2013-02-10 19:27:28 bklimt

HTML Body Height 100％ - still百分比高度百分比不工作

回答

相關問題