Установка ширины является односторонней в CSS; вы мгновенно теряете информацию о ширине родителя.
Короче говоря: Вы не можете переустановить div внутри ограниченного div в ширину окна с помощью только CSS . С JavaScript и при условии, что у родителя нет overflow:hidden
, вы можете сделать это:
- установить ширину дочернего элемента в window.innerWidth и
- установить для левого и правого поля дочернего элемента значение - (window.innerWidth / 2 - parentDivs_width)
как, например, для размера окна 800px:
#parent {
width: 300px;
margin: 0 auto;
}
#child {
/* set these with JS */
width: 800px;
margin: 0 -250px;
}
Более тривиальное решение состоит в том, чтобы переместить дочерний элемент div из его родителя и расположить его и родительский элемент с отрицательным верхним и нижним полями. (position:absolute
не будет работать, потому что это то же самое, вы теряете информацию о ширине.)