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

Question

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

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

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

Answer 1

Вы должны:

• Убедитесь, что у вас есть 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/

Answer 2

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

Answer 3

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

#selector:after { content: '|' }