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

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

Div仍未显示正确的高度……仅限于其内容的高度.

这是我的代码：

<!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脚本只是弄乱了视图.

解决方法

设置百分比充其量是最好的.根据我的经验,我更喜欢使用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正文高度100％ – 仍然高度百分比不起作用

解决方法

相关文章