Как я могу развернуть дочернее отделение до 100%-го экрана width, если контейнерное отделение меньше?
Родительский элемент целой страницы является отделением в центре, ограниченным макс. шириной 960 пкс. Все другие элементы на странице являются детьми того родительского отделения. Упрощенная структура следующая:
<div id="parent">
<div id="something"></div>
<div id="wide-div></div>
<div id="something-else></div>
</div>
В то время как родительское отделение не должно расширяться вне ширины 960 пкс, отделение, которое я назвал "широким отделением" здесь, должно заполнить всю ширину экрана. Это содержит единственное изображение, которое более широко, чем 960 пкс, и это должно выбрать другой цвет фона для всей ширины экрана.
Я не могу легко вынуть то отделение из родительского отделения, оно испортило бы другие части моего расположения, и оно сделает все это довольно неловким.
Я нашел несколько приемов о том, как можно достигнуть этого, но ни один, казалось, не соответствовал моим требованиям. Мой дизайн является быстро реагирующим, или по крайней мере я пытаюсь достигнуть этого. Приемы, которые я нашел, полагались на знание размера включенных элементов, который не фиксируется в моем случае.
Существует ли способ развернуть внутреннее отделение до полноэкранной ширины в быстро реагирующем расположении?
1 ответ
Я немного удивлен, что никто не предложил следующее за прошлые 4 года. Свойство css position:fixed вытаскивает объект и масштабирует его относительно окна. Существуют некоторые случаи, где, возможно, это не работает, но если Вы - Javascripting модальное поле или что-то, это хорошо работает.
.wide-div{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%; // in case you need to cover the height as well
background-color:rgba(0,0,0,.8); //just so you can see the div is on top of your content
z-index:1; // you may need to adjust the index of your other elements as well
}