Html 由于上层菜单的高度，<div style="height:100%"> 比页面大。如何解决这个问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11355692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<div style="height:100%"> is bigger than page because of upper-menu's height. How to fix this?
提问by MaiaVictor
Specifially, this code:
具体来说，这段代码：
<html>
<body style="margin: 0px; padding: 0px">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div style="height:100%; background-color:#DDFFDD">body</div>
</body>
</html>
Is rendered bigger than the window, creating a permanent scrollbar:
渲染得比窗口大，创建一个永久滚动条：
What is a proper way to fix this issue?
解决此问题的正确方法是什么？
回答by Alex W
The problem is that you are making this div 100% height:
问题是你让这个 div 100% 高度：
<div style="height:100%; background-color:#DDFFDD">body</div>
the height property in % will make the div take up that percentage of its container, which in this case is the HTML <body>, so changing the header div to be height: 10%and the body div to be height: 90%should fix the problem.
% 中的 height 属性将使 div 占据其容器的百分比，在这种情况下是 HTML <body>，因此将标题 div 更改为 divheight: 10%和 body divheight: 90%应该可以解决问题。
回答by banzomaikaka
You can simply do it this way:
你可以简单地这样做：
HTML
HTML
<div class="header"> Header</div>
<div class="main">Main content area</div>?
CSS
CSS
body {
background: yellow;
}
.header {
height: 30px;
background: red;
}
Check it out: http://jsfiddle.net/EDWTM/
检查一下：http: //jsfiddle.net/EDWTM/
回答by Umbrella
Move the background color to the body, and lose the height.
将背景颜色移动到身体，并失去高度。
<html>
<body style="margin: 0px; padding: 0px; background-color:#DDFFDD">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div>body</div>
</body>
</html>
Alternatively, you could use margins and absolute positioning to place the header above the body:
或者，您可以使用边距和绝对定位将标题放在正文上方：
<html>
<body style="margin: 30px 0 0 0; padding: 0px">
<div style="height: 30px; width:100%; background-color:#FFDDDD; position: absolute; top:0; left: 0;">head</div>
<div style="height:100%; background-color:#DDFFDD;">body</div>
</body>
</html>
