Question

特别是，这段代码：

<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>

渲染得比窗口大，创建一个永久滚动条：

rendered site

解决此问题的正确方法是什么？

Answer 1

问题在于你将这个div设为100％高度：

<div style="height:100%; background-color:#DDFFDD">body</div>

％中的height属性会使div占用其容器的百分比，在本例中为HTML <body>，因此将标题div更改为height: 10%，将body div更改为是height: 90%应该解决问题。

Answer 2

你可以这样做：

HTML

<div class="header"> Header</div>
<div class="main">Main content area</div>

CSS

body {
    background: yellow;
}

.header {
    height: 30px;
    background: red;
}

检查出来：http://jsfiddle.net/EDWTM/

Answer 3

将背景颜色移动到正文，然后失去高度。

<html>
    <body style="margin: 0px; padding: 0px; background-color:#DDFFDD">
        <div style="width:100%; background-color:#FFDDDD">head</div>
        <div>body</div>
    </body>
</html>

http://jsfiddle.net/4XVrW/

或者，您可以使用边距和绝对定位将标题放在正文上方：

<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>

因为上菜单的高度，<div style =“height：100％”>比页面大。如何解决这个问题？</div>

3 个答案: