Выходите за пределы контейнера div - PullRequest
Новая
       9

Выходите за пределы контейнера div

13 голосов
/ 14 октября 2011

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

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

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

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

Эван

Ответы [ 5 ]

18 голосов
/ 01 ноября 2013

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

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

.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 /

5 голосов
/ 14 октября 2011

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

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

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

4 голосов
/ 14 октября 2011

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

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

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

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

Вложенные DIVs
Вот как я бы посоветовал вам сделать это.Прежде чем мы начнем беспокоиться о 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 и т. д.), с классом "center" внутри него.

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

.header {
  background-color: navy;
}

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

.header .center {
  width: auto;
}

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

Удачи!

4 голосов
/ 14 октября 2011

Более семантически правильный способ сделать это - поместить заголовок за пределы основного контейнера, избегая 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.

3 голосов
/ 18 сентября 2017

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

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

Полагаю, что все решения устарели.

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

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

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

...