Question

我发现很多问题都在问这个问题，但我找到的解决方案都没有完全适用于我所面临的问题。

基本上，我有一个菜单栏，然后是内容，但我希望内容的背景颜色填充页面的高度。当我应用height: 100%;时，我会得到一个滚动条。我已经读到了关于保证金崩溃的问题，这可能与此有关，但无论我用多少position: absolute;除掉多少余量，我都无法了解情况的根源

CSS的相关部分在这里：

body, html {
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size:12pt;
background:#f2f2f2;
padding:0;
margin:0;
height:100%;
width:100%;
}

#menubar {
position:absolute;
top:0px;
background:#FDBB30;
height:80px;
width:100%;
font-weight:bold;
}

#content {
position:absolute;
top:80px;
width:92%;
left:50px;
background:#ffffff;
height:100%;
}

Answer 1

#content {
position:absolute;
padding-top:80px; // instead of top:80px;
    box-sizing: border-box; // This will make your padding fit inside your height
width:92%;
left:50px;
background:#ffffff;
height:100%;
}

以下是您的问题的工作示例：

http://jsfiddle.net/t3xbL8dm/2/

Answer 2

您可以在css中使用calc：

#content {
height:calc(100% - 80px);
}

https://jsfiddle.net/ydyonjw9/1/

内容高度100％生成垂直滚动条

2 个答案: