Блог

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

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

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

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

Эван

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

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

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

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

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

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

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

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

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

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

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

должно достичь того, к чему вы стремитесь.

Есть несколько способов, которыми вы могли бы это сделать.

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

Тем не менее, он также будет расположен в верхней части страницы, вероятно, скрывая другой ваш контент, который не освободит место для вашего теперь 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 и сделает содержимое заголовка расширяющимся до краев страницы.

Удачи!

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