Как отобразить полосу шириной 100% в дизайне CSS с использованием шаблона с фиксированной сеткой?

Question

Не уверен, что заголовок действительно описывает то, что я пытаюсь сделать. На самом деле, это довольно простое и широко распространенное использование через Интернет:

Я хочу на заднем плане немного жидкости / на всю ширину полос (с той же высотой, что и некоторые элементы дизайна), пока мой контент использует фиксированную сетку Blueprint.

Например, этот сайт: intient.com делает именно то, что я ищу. Фоновая полоса черного цвета (и еще одна - серого цвета), которая соответствует ширине жидкости и содержимому с использованием сетки (но не Blueprint после просмотра CSS)

Я использую сетку с фиксированной шириной Blueprint (950 пикселей) для отображения любого содержимого. Ты знаешь, как я могу это сделать? С планом? И без статического фонового изображения ...

Спасибо

Answer 1

В Blueprint вы делаете это:

<div class="stripeContainer">
   <div class="container">
     <div class="span-8">Column 1</div>
     <div class="span-8">Column 2</div>
     <div class="span-8 last">Column 3</div>
   </div>
</div>
<div class="container">
  <div class="span-12">Body goes here</div>
  <div class="span-12 last">Some sort of menu perhaps</div>
</div>

Тогда вы стиль .stripeContainer:

.stripeContainer
{
    width: 100%; /* this is usually implied */
    background-color: pink;
}