Question

例如：我身体里只有两个div，身高是100％：

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

我想#content可以自动采用浏览器窗口中剩下的高度

Answer 1

首先：你为什么要这样做？通常这样的事情是没有必要的，你只需要看，好像content填充窗口的其余部分，并且根据你的实际目标有更好的解决方案。

特别是“菜单栏”的固定高度（以像素为单位）会有问题 - 请记住，不可能强制用户使用特定的字体大小！

如果您真的知道这就是您想要的，那么您可以绝对定位content：

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

（但IE6不支持此。）

Answer 2

使用纯CSS，这是不可能的。您需要使用Javascript才能填满整个屏幕。

Answer 3

您可以找到窗口高度并减去menuBar高度。这是jQuery的一个例子......

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

演示：http://jsfiddle.net/2ugMV/

Answer 4

你可以使用一个简单的黑客，它将为你提供你想要的东西。这只是隐藏了菜单下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自动采用屏幕左侧的高度？

4 个答案: