Побег над границами контейнера div

Хорошо, я понимаю, что цель DIV состоит в том, чтобы содержать свои внутренние элементы - я не хотел никого расстраивать, говоря иначе. Однако, пожалуйста, рассмотрите следующий сценарий:

Моя веб-страница (которая занимает только 70% всей страницы) окружена контейнером (div). Однако в моей навигационной панели, которая находится в верхней части страницы, я хотел бы создать w-баннер, который занимает 100% от ширины всей страницы (что означает, что он должен будет выйти за пределы своего контейнера в качестве контейнер занимает всего 70% ширины страницы).

Это основная идея, которую я пытаюсь выполнить: http://www.petersonassociates.biz/

Есть ли у кого-нибудь предложения о том, как я могу это сделать? Я был бы признателен за любую помощь.

Эван

Ответ 1

Если я правильно понял,

style="width: 100%; position:absolute;"

должен достичь того, что вы собираетесь делать.

Ответ 2

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

В двух словах (исправление от комментария):

.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}

Это дает вам горизонтальные полосы прокрутки, которые вы удаляете с помощью:

body {overflow-x: hidden; }

В http://www.sitepoint.com/css-extend-full-width-bars/ есть руководство. Это может быть более семантическим для этого с помощью элементов psuedo: http://css-tricks.com/full-browser-width-bars/

Ответ 3

Более семантически правильный способ сделать это - разместить свой заголовок вне основного контейнера, избегая position:absolute.

Пример:

<html>
  <head>
    <title>A title</title>
    <style type="text/css">
      .main-content {
        width: 70%;
        margin: 0 auto; 
      }
    </style>
  </head>
  <body>
    <header><!-- Some header stuff --></header>
    <section class="main-content"><!-- Content you already have that takes up 70% --></section>
  <body>
</html>

Другой метод (сохранение его в <section class="main-content">) является таким, как вы сказали, неправильным, поскольку div (или раздел) должен содержать элементы, а не выходить за рамки их родительского div/section. Вы также столкнетесь с проблемами в IE (я считаю, что что-то 7 или ниже, это может быть только IE6 или меньше), если ваш дочерний div продолжается вне родительского div.

Ответ 4

Есть несколько способов сделать это.

Абсолютное позиционирование
Как и другие, предположили, что если вы дадите элементу, который вы хотите растянуть на странице CSS, свойства 100% ширины и абсолютной позиции, он будет охватывать всю ширину страницы.

Однако он также будет расположен в верхней части страницы, возможно, затеняя ваш другой контент, который не освободит место для вашего 100% -ного контента. Абсолютное позиционирование удаляет элемент из потока документов, поэтому он будет действовать так, как если бы ваш новый позиционированный контент не существовал. Если вы не готовы точно рассчитать, где находится ваш новый элемент, и освободить место для него, это, вероятно, не самый лучший способ.

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

Вложенные DIV
Вот как я предлагаю вам это сделать. Прежде чем мы будем беспокоиться о любом материале 100% -ной ширины, я сначала покажу вам, как настроить 70-процентный взгляд.

<div class="header">
<div class="center">
  // Header content
</div>
</div>
<div class="mainContent">
<div class="center">
  // Main content
</div>
</div>
<div class="footer">
<div class="center">
  // Footer content
</div>
</div>

С CSS следующим образом:

.center {
  width: 70%;
  margin: 0 auto;
}

Теперь у вас есть то, что кажется контейнером вокруг вашего централизованного контента, когда на самом деле каждая строка контента, перемещающегося по странице, состоит из содержащего div с семантическим и описательным классом (например, header, mainContent и т.д.), внутри которого находится "центр".

С учетом этой настройки заголовок заголовка "вырваться из контейнера div" будет таким же простым, как:

.header {
  background-color: navy;
}

И цвет доходит до краев страницы. Если по какой-то причине вы хотите, чтобы сам контент растягивался по странице, вы могли бы сделать:

.header .center {
  width: auto;
}

И этот стиль переопределит стиль .center и сделает содержимое заголовка расширенным до краев страницы.

Удачи!

Ответ 5

РЕДАКТИРОВАТЬ (2019): есть новый трюк, чтобы получить полное кровотечение с помощью этой утилиты CSS:

width: 100vw;
margin-left: 50%;
transform: translateX(-50%);

Я думаю, что все решения устарели.

Самый простой способ выйти за границы элемента - это добавить:

    margin-left: calc(~"-50vw + 50%");
    margin-right: calc(~"-50vw + 50%");

обсуждение можно найти здесь и здесь. Есть также хорошее решение для предстоящих сеточных макетов.