如何使div自动采用屏幕上剩余的高度？

问题描述

| 例如：我的身体只有两个div，身体的高度为100％：

<body>
<div id=\"menuBar\" style=\"height:30px\"></div>
<div id=\"content\"></div>
</body>

我希望#content可以自动采用浏览器窗口中剩余的高度

解决方法

首先：为什么要这样做？通常不需要这样，您只需要看起来content填满了窗口的其余部分，并且根据您的实际目标有更好的解决方案。尤其是“菜单栏”中以像素为单位的固定高度会出现问题-请记住，无法对用户强制使用特定的字体大小！如果您真的知道这是您想要的，那么可以绝对定位content：

#content {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    right: 0;
}

（但是IE6不支持。） ,使用纯CSS，这是不可能的。您需要使用Javascript才能使其覆盖整个屏幕。 ,您可以找到窗口高度并减去menuBar高度。这是jQuery的示例...

$h = $(window).height() - $(\'#menuBar\').height();
$(\'#content\').height($h + \'px\');

演示：http：//jsfiddle.net/2ugMV/ ,您可以使用简单的技巧，这将为您提供所需的服务。这只会在菜单下隐藏30px的内容。然后使用填充30来确保内容在正确的位置。

<html>
<head>
</head>
<body style=\"height:100%;padding:0px;margin:0px;\">

<div id=\"menu\" style=\"position:relative;height:30px;background-color:#FF0000;z-index:100;\"></div>
<div id=\"content\" style=\"position:relative;height:100%;background-color:#00FF00;margin-top:-30px;z-index:90;padding:30px;\">
<p>hello world</p>
</div>

</body>
</html>

div div 剩余幕上自动自动采用采用采用高度高度