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

Question

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

См. Пример ниже:

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

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

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

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

Обновление

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

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

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

Answer 1

Более современное решение этого вопроса заключается в использовании единицы просмотра vw и calc().

. Установите width дочернего элемента равным 100% ширины области просмотра или * 1006.*.Затем переместите дочерний элемент на 50% ширины области просмотра - минус 50% от ширины родительского элемента - влево, чтобы он соответствовал краю экрана.

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 50px;
    background: blue;
}

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

Вот демоверсия .

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

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

Answer 2

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

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Answer 3

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

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

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

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Answer 4

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

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 недостатка этого метода обхода:

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

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

Answer 5

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

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;
}

Answer 6

Предполагая, что родительский объект имеет фиксированную ширину, например, #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;
}

Answer 7

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

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Answer 8

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

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

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

Answer 9

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

Answer 10

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>