div填充剩余高度css答案

【问题标题】：div fill remaining height cssdiv填充剩余高度css
【发布时间】：2013-12-12 13:02:59
【问题描述】：

我有这个代码：
HTML：

<body>
<div id="menu">  
menu elements...  
</div>  
<div id="main">  
Main website content...  
</div>
</body>

CSS：

body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}

菜单 div 是一个水平菜单栏。
我希望主 div 填满整个页面（菜单除外）。此外，当需要它时，它应该填充更多空间（例如：如果它有很多内容）。我不想使用任何 javascript 或 CSS 的 calc() 方法。
有没有可能做我想做的事？
感谢您的宝贵时间！

【问题讨论】：

Make a div fill the height of the remaining screen space的可能重复

标签： css html height

【解决方案1】：

是的，您可以添加到您的 CSS：

html, body {
    height: 100%;
}

然后您的 div 将正确使用带 % 的高度属性。可以添加bottom、left、right、top属性：

div#main {
    position: absolute;
    overflow: auto;
    bottom: 5px;
    top: 50px;
    left: 5px;
    right: 5px;
}

检查边距和填充。

如果你会使用 javascript，那可能会很有趣

height: auto;
max-height: 300px; /*calculated value on resize and load*/

【讨论】：

只有当 div#main 的内容不是很多时才有效。但是当它的内容需要比屏幕更多的空间时，内容就会超出 div#main 的白色区域。
使用溢出：自动。或者你需要使用javascript。你必须使用 height:auto 和 min-height。但是没有js或者表达式你不知道它的价值。
我必须为 div#main 添加“位置：绝对”。底部、顶部、左侧和右侧结合溢出效果很好，但这并不是我想要的。我会等待更好的答案，但如果他们不来，我想做的事情是不可能的，我会改变问题，我会投票给你。谢谢！
为什么需要填满整个文档空间？例如，如果它是关于背景的 - 使用背景属性作为正文。更详细地向我描述你的情况。
更多的是网页的风格。我不能使用背景属性，因为有颜色和形状。此外，如果我使用 css3 属性背景图像、大小等，形状（css 中的边框半径）将无法很好地显示。这是您的溢出建议的临时示例：srn.netau.net。