Выход за границы контейнера div
Хорошо, я понимаю, что цель DIV состоит в том, чтобы содержать его внутренние элементы - я не хотел никого расстраивать, говоря иначе. Однако, пожалуйста, рассмотрите следующий сценарий:
Моя веб-страница (занимающая ширину всего 70% всей страницы) окружена контейнером (div). Тем не менее, под моей навигационной панелью, которая находится в верхней части страницы, я хотел бы создать w баннер, который занимает 100% ширины всей страницы (что означает, что он должен будет выходить за пределы своего контейнера, так как контейнер занимает только 70% ширины страницы).
Это основная идея, которую я пытаюсь реализовать: http://www.petersonassociates.biz/
У кого-нибудь есть предложения, как мне это сделать? Буду признателен за любую помощь.
Evan
6 ответов
Если я правильно поняла,
style="width: 100%; position:absolute;"
должен достичь того, что вы собираетесь.
Если вы просто хотите, чтобы фон элемента распространялся на всю страницу, этого также можно добиться с помощью отрицательных полей.
В двух словах (исправление из комментария):
.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/
Я думаю, что все решения устарели.
Лучший способ избежать границ элемента - добавить:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
обсуждение можно найти здесь и здесь. Есть также хорошее решение для предстоящих сеточных макетов.
Есть несколько способов сделать это.
Абсолютное позиционирование
Как и предлагали другие, если вы дадите элемент, который вы хотите растянуть по 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 и т. Д.), С класс "центр" внутри него.
С этой настройкой сделать заголовок "вырваться из контейнера" так же просто, как:
.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.