Есть ли способ сделать ширину дочернего DIV шире, чем родительский DIV с помощью CSS?

229

Есть ли способ иметь дочерний DIV внутри родительского контейнера DIV, который шире, чем его родительский. Дочерний DIV должен быть такой же ширины окна просмотра браузера.

Смотрите пример ниже: введите описание изображения здесь

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

Я знаю, что могу это сделать:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

Но мне нужно, чтобы ребенок был такой же ширины, как браузер, который является динамическим.

Обновить

Спасибо за ваши ответы, кажется, что самый близкий ответ на данный момент состоит в том, чтобы сделать дочернюю позицию DIV: абсолютной, и установить свойства left и right равными 0.

Следующая проблема, которую я имею, состоит в том, что у родителя есть положение: относительное, что означает, что левые и правые свойства все еще относительно родительского div, а не браузера, см. Пример здесь: jsfiddle.net/v2Tja/2

Я не могу удалить положение относительно родителя, не испортив все остальное.

Camsoft
источник
Ваши требования не имеют смысла. "Дочерний div" должен оставаться дочерним по отношению к родительскому div, и все же родительский div имеет position: relative? Для чего тебе нужно position: relative? Я думаю, что я спрашиваю: что вы пытаетесь сделать?
тридцать седьмого
@Camsoft Вы видели мой комментарий к моему ответу? Это работает для меня, также проверьте мой сайт edocuments.co.uk, который делает то, что вы пытаетесь сделать по-другому
Blowsie
1
@Camsoft, кроме того, в вашем решении не должно быть нужды в jquery / js
Blowsie,

Ответы:

112

Используйте абсолютное позиционирование

.child-div {
    position:absolute;
    left:0;
    right:0;
}
Blowsie
источник
14
Хорошо, следующий вопрос, что, если у родителя или другого предка есть макет, т.е. позиция: относительная, см .: jsfiddle.net/v2Tja/2
Camsoft
как насчет другого родительского div, являющегося позицией: static, и другого div внутри с position: относительным? jsfiddle.net/blowsie/v2Tja/3
Blowsie
10
Есть ли способ сделать это, при этом высота авто .child-div все еще имеет правильное расположение ниже?
Филипп Гилберт
2
и не устанавливайте родительский div в «overflow: hidden» ^^
chris
@Blowie как насчет position:fixed . почему это не работает должным образом?
Мостафа Гадими
227

Вот общее решение, которое сохраняет дочерний элемент в потоке документов:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

Мы устанавливаем widthдочерний элемент так, чтобы он занимал всю ширину области просмотра, затем мы приближаем его к краю экрана, перемещая его кleft расстояние, равное половине области просмотра, минус 50% ширины родительского элемента.

Демо-версия:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}
<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Браузерная поддержка для vw и для calc () обычно может рассматриваться как IE9 и новее.

Примечание. Предполагается, что для блочной модели задано значение border-box. Без border-boxэтого вам также придется вычитать отступы и границы, что делает это решение беспорядочным.

Примечание. Рекомендуется скрывать горизонтальное переполнение контейнера прокрутки, поскольку некоторые браузеры могут отображать горизонтальную полосу прокрутки, несмотря на отсутствие переполнения.

Нильс Касперссон
источник
4
Что вы знаете, это действительно работает в IE9. +1 Ницца
CatShoes
13
Это было именно то, что я искал, спасибо, очень много. IMO, это лучший ответ, чем принятый, так как этот не нарушает документооборот
Rémi
18
VW не годится. Если у вас есть вертикальная полоса прокрутки, то 100vw даст вам горизонтальную полосу прокрутки.
Солнечный
2
Кажется, это работает только на один уровень ниже. Есть ли способ для него работать независимо от того, сколько родительских элементов имеет дочерний элемент?
Мифофешелон
3
Это правильный ответ, чтобы обернуть более широкий дочерний элемент в position: relativeродительский!
Hanfei Sun
14

Я долго искал решение этой проблемы. В идеале мы хотим, чтобы ребенок был больше, чем родитель, но не зная заранее ограничений родителя.

И я наконец нашел блестящий общий ответ здесь . Копирование это дословно:

Идея здесь такова: переместите контейнер точно в середину окна браузера слева: 50%; затем потяните его обратно к левому краю с отрицательным полем -50vw.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
dangom
источник
1
Я обнаружил, что если я хочу, чтобы он составлял, скажем, 90% ширины области просмотра, я могу использовать вышеизложенное, но установить ширину равной 90vw. Кроме того, похоже, что не margin-rightимеет никакого эффекта в любом случае.
Джейсон Дюфаир
пришлось изменить поля margin-left и right, потому что моя оболочка составляет 80% ширины области просмотра. Так что в моем случае это должны были быть margin-left: -10vw и margin-right: -10vw, и тогда это отлично работало! Спасибо!
Тимофей Трибль
1
Это был блестящий ответ! Спасибо.
cullanrocks
7

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

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

Отрицательные поля позволят контенту вытекать из родительского DIV. Поэтому я установил, padding: 0 100%;чтобы содержимое возвращалось к исходным границам Chlid DIV.

Отрицательные поля также увеличивают общую ширину .child-div из области просмотра браузера, что приводит к горизонтальной прокрутке. Следовательно, нам нужно обрезать ширину выдавливания, применяяoverflow-x: hidden к DIV деду (который является родителем родительского Div):

Вот JSfiddle

Я пробовал Нильса Касперссона left: calc(-50vw + 50%); он прекрасно работал в Chrome и FF (пока не уверен насчет IE), пока я не обнаружил, что браузеры Safari не делают это должным образом. Надеюсь, они скоро это исправят, так как мне действительно нравится этот простой метод.

Это также может решить вашу проблему, где родительский элемент DIV должен быть position:relative

2 недостатка этого метода обхода:

  • Требуется дополнительная разметка (то есть элемент grandparent (точно так же, как хороший метод выравнивания таблицы по вертикали, не так ли ...)
  • Левая и правая границы Child DIV никогда не будут отображаться просто потому, что они находятся вне области просмотра браузера.

Пожалуйста, дайте мне знать, если вы обнаружите какие-либо проблемы с этим методом;). Надеюсь, поможет.

Austeroid
источник
4

Flexbox можно использовать, чтобы сделать ребенка шире, чем его родитель, с помощью трех строк CSS.

Только ребенок display, margin-leftи widthнужно установить. margin-leftзависит от ребенка width. Формула:

margin-left: calc(-.5 * var(--child-width) + 50%);

Переменные CSS могут использоваться, чтобы избежать ручного вычисления левого поля.

Демонстрация № 1: Ручной расчет

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}
<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Демонстрация № 2: Использование переменных CSS

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}
<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Markus
источник
3

Я использовал это:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}
hsuastegui
источник
1

Вы можете попробовать положение: абсолют. и дать ширину и высоту, сверху: «ось у сверху» и слева: «ось х»

Хуррам Ияз
источник
1

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

Я решил эту проблему, создав дочерний элемент position: relativeи добавив к нему псевдоэлемент ( :before) position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Псевдоэлемент остается за фактическим дочерним элементом как псевдоэлементный элемент. Это работает во всех браузерах (даже IE8 + и Safari 6+ - нет возможности протестировать более старые версии).

Небольшой пример скрипки: http://jsfiddle.net/vccv39j9/

Seika85
источник
Кажется, это работает, но заставляет браузер показывать горизонтальную полосу прокрутки, так как ширина составляет 4000 пикселей. Какой обходной путь удерживает псевдоэлемент в пределах ширины области просмотра?
Аарон Худон
Конечно, вы должны установить для тела или div обтекания страницы значение overflow-x: hidden.
Seika85
1

Добавляя к решению Нильса Касперссона, я также определяю ширину вертикальной полосы прокрутки. Я использую 16pxв качестве примера, который вычитается из ширины порта просмотра. Это позволит избежать появления горизонтальной полосы прокрутки.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));
А-зона
источник
1
Я считаю, что то, 16pxчто вам нужно вычесть, потому что оно вызывает горизонтальную полосу прокрутки, является полем / html, body{ margin:0; padding:0 }отступом по умолчанию для браузера, вместо того, чтобы вычитать его, просто используйте это, таким образом, вам не нужно делать дополнительные вычисления для16px
Mi-Creativity
Это когда содержимое страницы длиннее и опускается ниже сгиба, а полоса прокрутки появляется автоматически. Конечно, когда содержимое находится внутри сгиба, это не нужно. Я добавляю 16px к формуле только тогда, когда знаю, что содержимое страницы будет длинным и полоса прокрутки действительно появится.
A-Zone
Я думаю, что это не будет работать на мобильном телефоне. У мобильного телефона нет полосы прокрутки.
hjchin
1

Предполагая, что родительский элемент имеет фиксированную ширину, например, #page { width: 1000px; }и центрирован #page { margin: auto; }, вы хотите, чтобы дочерний элемент соответствовал ширине области просмотра браузера, которую вы могли бы просто сделать:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}
Набиль Кадими
источник
1

Чтобы разделить дочерний элемент по ширине с содержимым, попробуйте следующее:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}
Токи
источник
0
.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}
Сэм
источник
Умно, но, похоже, не работает (по крайней мере, с интервалами, встроенными в li).
Ерф
0

Я знаю, что это старо, но для любого, кто придет к этому за ответом, вы сделаете это так:

Переполнение скрыто в элементе, содержащем родительский элемент, например в теле.

Дайте вашему дочернему элементу ширину, намного более широкую, чем ваша страница, и расположите его абсолютно слева на -100%.

Вот пример:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

Также вот JS Fiddle: http://jsfiddle.net/v2Tja/288/

Том Чинери
источник
0

Тогда решение будет следующим.

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }
Химаван
источник
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, как и / или почему он решает проблему, улучшит долгосрочную ценность ответа.
Р Баласубраманян
0

Я попробовал некоторые из ваших решений. Вот этот :

margin: 0px -100%;
padding: 0 100%;

безусловно лучший, так как нам не нужны дополнительные CSS для меньшего экрана. Я сделал codePen, чтобы показать результаты: я использовал родительский div с фоновым изображением и дочерний div с внутренним содержимым.

https://codepen.io/yuyazz/pen/BaoqBBq

blogob
источник