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

Скажем, у меня есть эта разметка:

<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 каждый.

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


background-color css fixed-width fluid-layout
person jw60660    schedule 06.10.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Во-первых, немного измените структуру 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;}

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

person Simon Arnold    schedule 06.10.2011
comment
Да, это помогает, спасибо. Позвольте мне спросить вас: если бы я хотел, чтобы фон центрального контейнера также отображал один цвет слева и другой справа, чтобы соответствовать плавающим фонам левой и правой колонок? Например: ссылка на пример - person jw60660; 06.10.2011
comment
Кажется, это соотношение 60% - 40%. Итак, вместо ‹div class=container›‹div id=left-column›content‹/div›‹div id=right-column›content‹/div›‹/div › попробуйте div #left с шириной фона 60% none и div #right шириной 40% background none. В #left добавьте div float right 600px с нужным цветом, а в #right div float:left другого цвета. :) - person Simon Arnold; 06.10.2011
comment
Большое спасибо! Я бы дал вам стрелку вверх, но у меня недостаточно представителей. - person jw60660; 06.10.2011
comment
Вам не нужно менять HTML, чтобы стилизовать его. Это не цель HTML. - person LandonSchropp; 28.04.2012

arrow_upward
0
arrow_downward

Разделы заголовка и нижнего колонтитула должны быть за пределами контейнера. Примените цвет фона к обертке вокруг верхнего/нижнего колонтитула.

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}
person marissajmc    schedule 06.10.2011

arrow_upward
0
arrow_downward

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

person LandonSchropp    schedule 28.04.2012