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

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

Смотрите пример ниже:

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

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

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

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

Обновить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

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

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

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

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

Дайте вашему дочернему элементу ширину, намного более широкую, чем ваша страница, и расположите его абсолютно слева на -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/

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

HTML

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

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

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

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

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

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