0

background-image要素として設定した画像に問題がありbodyますが、ページの長さが異なるために正しく機能しません。メインの HTML 要素ごとに異なる body background-color を追加する方法はありますか?

たとえば、このWeb サイトでは、ヘッダーの周りのボディの色を白、次に Web サイトのメイン コンテナーを灰色のグラデーション、最後にフッターを灰色の単色にする必要があります。

後で編集:ジョセフ・シルバーの推奨に基づいて、フルブラウザ幅のバーの記事を読みました。コメントで、以下のコードまたはjsFiddleで確認できる問題の非常に簡単な解決策を見つけました:

#header {
background: white;
margin: 0 -2000px;
padding: 0 2000px;
}
#main   {
background: green;
margin: 0 -2000px;
padding: 0 2000px;
}
#footer {
background: gray;
margin: 0 -2000px;
padding: 0 2000px;
}
.content {
overflow-x: hidden;
}

さらに後で更新:水平スクロールの問題がある場合は、overflow-xプロパティを html 要素にも適用します。

html, body {
overflow-x: hidden;
}
4

1 に答える 1

1

.contentこれを行うには、次のように、各セクション内に配置する固定幅の再利用可能な div を作成します。

<div id="header">
    <div class="content">

    </div>
</div>
<div id="main">
    <div class="content">

    </div>
</div>
<div id="footer">
    <div class="content">

    </div>
</div>

各セクションに必要な背景色を親 div に割り当てます。これにより、ブラウザー ウィンドウの幅全体に「自然に」引き伸ばされます。

#header {background: #000;}
#main   {background: #ccc;}
#footer {background: #fff;}

次に.content、固定幅を指定します。

.content {
    margin: 0 auto;
    width: 960px;
}
于 2012-07-31T18:58:03.980 に答える