Как я могу сделать div span 100% длины страницы, используя несемантическую структуру CSS?

Question

Нужно ли будет редактировать рамки? Или я должен создать этот div вне контейнера div? Элемент div, который я хочу охватить 100% окна, - это раздел меню, поэтому я хочу, чтобы он занимал 100% окна, но я хочу, чтобы элементы меню внутри него соответствовали сеточной системе.

Какой лучший способ пойти по этому поводу? Поместить пункты меню в сетку, а затем использовать минус-отступ, чтобы получить его?

Большое спасибо.

Answer 1

Я знаю, что этому вопросу уже около шести месяцев, но я решил опубликовать здесь свое решение на случай, если оно кому-нибудь пригодится.

Поэтому мое решение будет состоять в том, чтобы просто применить классы сетки к элементам, которые действительно нуждаются в макете сетки. В моем примере header не имеет никаких семантических классов, поэтому он может охватывать всю ширину страницы, но nav Элемент является контейнером сетки, который будет содержать столбцы с grid-xx классы. Согласно Sass Documentation от Unsemantic, максимальная ширина по умолчанию должна составлять 1200 пикселей;

HTML

<header>                               
  <nav class="grid-container">
    <ul class="grid-33">
      <li><h2>My Site</h2></li>
    </ul>
    <ul class="grid-66">
      <li><a href="#">Home</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>
</header>

CSS

Для этого примера:

• Сбросить модель коробки для html, body а также header поэтому навигация занимает всю ширину страницы
• Поместите светло-серый цвет фона для header так что вы можете видеть, что он занимает всю ширину страницы
• Поместите синюю рамку для nav так что вы можете увидеть элемент с классом grid-container
• Горизонтальное выравнивание ul и показать красную рамку, чтобы вы могли видеть элементы с классом grid-xx

Конечно, вам придется дополнительно стилизовать навигацию так, чтобы она соответствовала вашему проекту. Вот таблица стилей, с которой нужно начать (созданная с помощью компаса, используя миксины reset-box-model и inline-block-list):

html, body, header {                                                                                                                                                                                                                     
  margin: 0;
  padding: 0;
  border: 0;
}

nav {
  border: thin solid blue;
}

ul {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1;
  border: thin solid red;
}
ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  white-space: nowrap;
}

header {
  background-color: lightgray;
}