0

具体来说，这段代码：

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

呈现大于窗口，创建永久滚动条：

渲染站点

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

4

3 回答 3

2

问题是你正在使这个 div 100% 高度：

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

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

于 2012-07-06T04:21:39.290 回答
1

你可以简单地这样做：

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/

于 2012-07-06T04:11:31.667 回答
1

将背景颜色移动到身体，并失去高度。

<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>
于 2012-07-06T04:20:06.093 回答