Как создать горизонтальную полосу, которая растягивается по экрану, но не находится в теге body?

Очень простой вопрос!

У меня есть фоновый узор, который повторяется по всему тегу body. Я также хотел бы, чтобы верхняя и нижняя панели (верхний/нижний колонтитулы) повторялись по оси x, создавая красивый сэндвич-стиль сплошного цвета, узора и сплошного цвета снова для фона.

Как это можно сделать?

Полосы должны иметь ширину 100%, поэтому это не делается через оболочку содержимого или div верхнего / нижнего колонтитула, поскольку они установлены на ширину 1000 пикселей. Цветные полосы должны проходить через весь экран.


css background repeat
person Tigger    schedule 01.06.2011    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Вам следует:

  • Убедитесь, что у вас есть html, body { margin: 0; padding: 0 }
  • Добавьте #headerBar и #footerBar вне вашей «оболочки содержимого».

Примерно так: http://jsfiddle.net/GDDA5/

html, body {
    margin: 0;
    padding: 0
}
#contentWrapper {
    width: 300px;
    margin: 0 auto;
    background: #ccc;
    height: 100px
}
#headerBar {
    height: 40px;
    background: blue
}
#footerBar {
    height: 40px;
    background: red
}

Или, если вы хотите, чтобы панели прикреплялись к области просмотра и находились за содержимым: http://jsfiddle.net/GDDA5. /3/

person thirtydot    schedule 01.06.2011
comment
Заголовок работает - моя проблема в нижнем колонтитуле. Нижний колонтитул смещается под фактический контент. Что я хочу сделать, так это продолжить его по горизонтали за содержимым. Мне было интересно, нужен ли какой-то трюк с позиционированием или z-индексом. - person Tigger; 02.06.2011
comment
@Tigger: Вы проверили вторую ссылку jsFiddle в моем ответе? - person thirtydot; 02.06.2011
comment
Да, я сделал - спасибо и за этот ответ. Я ищу ответ, который не зависит от видового экрана. Вот сайт, у которого есть верхний и нижний колонтитулы с тем же дизайном, которого я пытаюсь добиться. mwatoday.com/initiatives/mwa_grant_program.aspx - person Tigger; 02.06.2011
comment
Просмотрев CSS, я вижу, как они добились футера. Синий цвет нижнего колонтитула на самом деле является цветом тела, а затем обертка содержимого белая, что создает вид сэндвича. На моем сайте фон тела представляет собой шаблон, а оболочка содержимого имеет собственный фон, поэтому в моей ситуации это не работает. - person Tigger; 02.06.2011

arrow_upward
0
arrow_downward

я опоздал к паритету здесь, но используйте css3!

#selector:after { content: '|' }
person jahrichie    schedule 05.11.2012

arrow_upward
0
arrow_downward

Вы должны взять нижний колонтитул div из div-оболочки содержимого, тогда он должен автоматически принимать размеры ширины тела, давая вам эффект, который вы ищете.

person Etorres    schedule 12.03.2013