Исправлен div Blueprint с шириной фона, которая охватывает все окно браузера - PullRequest
Новая
       42

Исправлен div Blueprint с шириной фона, которая охватывает все окно браузера

0 голосов
/ 20 февраля 2012

Я использую Compas s с Blueprint framework .

Я использую макет с 24 столбцами общей шириной 1000 пикселей.Это определено в моем base.scss.

Разметка выглядит следующим образом: 

<div id="menu">
  <div id="container">
     <div id="main-menu">
      <ul>
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
      </ul>
     </div>
  </div>
</div>

Scss: 

@import "../partials/base";
@import "blueprint";
@import "compass/typography/lists/horizontal-list";

#container{
  @include container();
}

#main-menu-container{
  background-color: red;
  min-width: 1000px;
  position: fixed;
  top: 0%;
  left: 50%;
  margin-left: 500px;

}

#main-menu{

  @include horizontal-list();
  @include span(24);
  border: red 1px solid;

}

Все работает.Но я хочу исправить меню в верхней части окна.

Проблема в том, что я начинаю добавлять position: fixed к любому из контейнеров, тогда фон не растягивается на 100%.

Эффект, который я хочу, похож на меню Facebook.Обратите внимание, что фон растягивается на 100%, но меню занимает только сетку и центрируется:

enter image description here enter image description here

Как мне добиться такого эффекта с помощью светокопии?

Я бы предпочел не добавлять никаких дополнительных div, которые не имеют никакого семантического значения.

1 Ответ

0 голосов
/ 20 февраля 2012

Вот что я закончил: 

@import "../partials/base";
@import "blueprint";
@import "compass/typography/lists/horizontal-list";

#container{
  @include container();
}

#main-menu-container{
  background-color: blue;
  min-width: 1000px;
  position: fixed;
  width: 100%; //Notice that a width is explicitly set
  top: 0%;
}

#main-menu{
  @include horizontal-list();
  @include span(24, true);
}
...