我知道这很愚蠢..但是将 html 和 body 标签的高度设置为 100% 并将填充和边距调整为 0 并没有解决这个问题!
div 仍然没有显示正确的高度..而只显示其内容的高度。
这是我的代码:
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 脚本只是扰乱了 View 。
最佳答案
设置百分比充其量是不确定的。根据我的经验，我更喜欢只使用 JavaScript 函数来获取页面宽度和高度，并将 div 尺寸设置为像素，而不是百分比。将 ids 设置为您要格式化的 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 标记的尺寸。)通过这种方式，您将拥有实际的尺寸的像素，而不是百分比。
尝试一下，如果有问题请告诉我。在我的编码历史中，我多次使用这个脚本，它已成为我最喜欢和最常用的脚本之一。
关于HTML Body Height 100% - 仍然无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14443307/