Есть ли способ сделать ширину дочернего 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

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

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

Answer 2

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

HTML

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

CSS

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

Answer 3

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

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

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

Answer 4

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