4

我知道这是一个愚蠢的..但是将 html 和 body 标签的高度设置为 100% 并将填充和边距调整为 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 脚本只是弄乱了视图。

4

2 回答 2

5

设置百分比充其量是不确定的。根据我的经验，我更喜欢只使用 JavaScript 函数来获取页面宽度和高度，并将 div 尺寸设置为像素，而不是百分比。将 id 设置为您想要格式化并用于document.getElementById调整它们大小的 HTML 元素。

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 标签的尺寸。）这样，您将获得尺寸的实际像素，而不是百分比。

试试看，如果你有问题，请告诉我。在我的编码历史中，我多次使用过这个脚本，它已成为我的最爱和最常用的脚本之一。

于 2013-01-21T16:50:39.483 回答
0

看看灵活的盒子布局。如果您尝试在某个高度的特定百分比处使用面板来布局应用程序，那么它应该会更好地为您工作。

于 2013-02-10T19:27:28.777 回答