0

このマークアップがあるとしましょう:

<div id="container">    
    <div id="header">content</div>
    <div id="left-column">content</div> 
    <div id="right-column">content</div>
    <div id="footer">content</div>
</div>

#container は中央に配置され、1000px に固定されます。#header と #footer は 1000px で、#content-left と #content-right はそれぞれ 500px で左にフロートされます。

コンテナーが固定されている場合、ヘッダーとフッターの背景色をブラウザー ウィンドウの全長に拡張するにはどうすればよいですか?

4

3 に答える 3

1

まず、HTML構造を少し変更します。
そこにいる間、ヘッダー要素とフッター要素にhtml5を使用してみませんか。

HTML

<header>
    <div class="container">
        content
    </div>
</header>
<div class="container">
    <div id="left-column">content</div>
    <div id="right-column">content</div>
</div>
<footer>
    <div class="container">
        content
    </div>
</footer>

Css
Than、Cssで、ヘッダーとフッターの幅を100％に設定し、必要な色に変更します。この例では赤です。コンテンツを画面の中央に表示する場所（ヘッダー、メインセクション、フッター）を表示するクラス.containerを使用するよりも、背景色は使用しません。

header, footer{display:block; width:100%; background:#ff000; margin:0; padding:0;}
.container{width:1000px; margin:0 auto;}

この助けを願っています:)

于 2011-10-06T02:39:37.557 に答える
0

ヘッダーとフッターの div は、コンテナー div の外にある必要があります。ヘッダー/フッターのラッパーに背景色を適用します。

html

<div id="header-wrapper">
    <div id="header">content</div>
</div>
<div id="container">
    <div id="left-column">content</div>
    <div id="right-column">content</div>
</div>
<div id="footer-wrapper">
    <div id="footer">content</div>
</div>

CSS

#header-wrapper{width:100%;height:xxx;background:#3399ff}
#header,#footer{width:1000px;margin:0 auto}
于 2011-10-06T02:20:26.373 に答える
0

受け入れられた答えは、これを達成するための本当に悪い方法です。HTML は、コンテンツのセマンティックな意味に使用されます。 コンテナからヘッダーを削除することはセマンティックではありません! セマンティック コンテンツを維持しながらこれを行うためのはるかに優れた方法を次に示します: http://css-tricks.com/full-browser-width-bars/。

于 2012-04-28T07:10:35.987 に答える