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>ようになるため、ヘッダー div を に変更しheight: 10%、ボディ div を に変更するとheight: 90%、問題が解決するはずです。

于 2012-07-06T04:21:39.290 に答える
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 に答える
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 に答える