Question

我知道这是一个愚蠢的..但是将html和body标签的高度设置为100％并将padding和margin调整为0并没有解决它！

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脚本只是搞乱了视图。

Answer 1

设置百分比至多是不确定的。根据我的经验，我更喜欢使用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标记的尺寸。）这样您就可以了具有尺寸的实际像素，而不是百分比。

尝试一下，如果您遇到问题请告诉我。我在编码历史中多次使用过这个剧本，它已成为我最喜欢和最常用的剧本之一。

Answer 2

看看flexible box layout。如果您尝试使用面板在某个高度的百分比下布局应用程序，它应该对您有效。

HTML正文高度100％ - 仍然高度百分比不起作用

2 个答案: