Расширение фона заголовка, если контейнер не является жидким

Question

Допустим, у меня есть такая разметка:

<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 плаваютслева, по 500 пикселей.

Как расширить цвета фона верхнего и нижнего колонтитула на всю длину окна браузера, если контейнер зафиксирован?

Answer 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
Затем в Css установите ширину верхнего и нижнего колонтитула на 100% и сделайте их нужным цветом. В этом примере красный. Чем используется класс .container, который будет отображать содержимое в любом месте экрана (верхний колонтитул, основной раздел, нижний колонтитул) в середине экрана, но без какого-либо цвета фона.

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

Надеюсь, эта помощь:)

Answer 2

Принятый ответ - действительно плохой способ сделать это. HTML используется для семантического значения контента. Удаление заголовка из контейнера не является семантическим! Вот гораздо лучший способ сделать это, сохранив семантическое содержимое: http://css -tricks.com / full-browser-width-bars / .

Answer 3

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}