Можете ли вы сделать ребенка div больше родителя без абсолютной позиции

Итак, в основном, что я хочу сделать, это иметь div или два на странице, которая больше, чем ее родительский div. Обычно я бы реструктурировал весь сайт, но это была бы большая задача.

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

Причиной для того, чтобы два div были больше, чем их родительские div, - они должны быть шириной браузера, когда контейнерные div могут быть не более 1200px.

Ответы

Ответ 1

Да!

Не только это, мы можем сделать это лучше, используя vw и calc.

Просто установите ширину дочерних элементов на 100% ширины окна просмотра, используя vw (процентные единицы просмотра), а затем установите их левое поле на отрицательное вычисленное значение на основе этого, за вычетом ширины обертка. Помимо необязательного max-width родителя, все остальное вычисляется автоматически. Вы можете динамически изменять ширину родительского контейнера, и дети будут автоматически изменять размер и выравнивать по мере необходимости, не размещаясь.

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 {
  width: 100vw;/* <-- children as wide as the browser window (viewport) */
  margin-left: calc(-1 * ((100vw - 100%) / 2));/* align left edge to the left edge of the viewport */
  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */
  height: 50px;
  background: yellow;
}

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

Ответ 2

Для достижения этой цели вы также можете использовать поля: http://jsfiddle.net/MEc7p/1/

div{
outline: 2px solid red;
}
#outer{
width: 200px;
height: 400px;
}
#inner{
width: 600px;
height: 200px;
margin: 0 -20px;
outline: 1px solid green;
}

Ответ 3

Попробуйте эту скрипту

http://jsfiddle.net/stanze/g2SLk/

.wrapper {
    width: 400px;
    border: 1px solid #f00;
    min-height: 153px;
}
.wrapper-child-1 {
    float: left;
    border: 1px solid #ccc;
    width: 195%;
    min-height: 262px;
}

<div class="wrapper">
  <div class="wrapper-child-1"> </div>
</div>