Question

我有这个代码：
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填充整个页面（菜单除外）。此外，当需要时，它应该填充更多空间（例如：如果它有很多内容）。我不想使用CSS的任何javascript或calc（）方法有可能做我想做的事吗？
谢谢你的时间！

Answer 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填充剩余高度css

1 个答案: