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

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

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

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

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

Эван

13
banner css html

5 ответов

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

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

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

4

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

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

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

16

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

Абсолютное Позиционирование
Как и другие предположили, если вы дадите элементу, который хотите растянуть по странице, свойства 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, с семантическим и описательный класс (например, заголовок, mainContent и т. д.), с классом "центр" внутри него.

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

.header {
  background-color: navy;
}

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

.header .center {
  width: auto;
}

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

удачи!

4

более семантически правильный способ сделать это-поместить заголовок вне вашего основного контейнера, избегая 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/раздела. Вы также столкнетесь с проблемами в IE (я считаю, что что-нибудь 7 или ниже, это может быть просто IE6 или меньше), если ваш ребенок div распространяется за пределы родительского div.

4

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

лучший способ избежать границ элемента-добавить:

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

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

2