Как сделать абсолютное положение div заполнить всю область документа

Мне нужно иметь абсолютное div, которое является дочерним только body, заполнить всю область документа (окно + любая область прокрутки) - ширина: только 100% заполняет видимый экранКак сделать абсолютное положение div заполнить всю область документа

Я предпочитаю только решение CSS, но чистый javascript в порядке. Я попытался без установки успеха:

opaque.style.minHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight);

Я сделал jsFiddle код ниже. Если вы прокрутите вниз выход, вы увидите, что непрозрачный div останавливается на любой высоте, когда окно вывода было обработано.

В случае, если вам интересно ... это сделать непрозрачное наложение всего содержимого в div позади него (подумайте о слайд-шоу). Мое другое решение - отключить прокрутку, но это проблематично.

Спасибо за любую помощь.

<div class="page-container"></div>  
<div id="opaque"></div> 

body { 
    width:100%; 
} 
.page-container { 
    position: relative; 
    max-width:978px; 
    width: 100%; 
    min-height:2500px; 
    margin:0 auto -50px auto; 
    border:solid #999; 
    border-width:2px; 
    background: lightblue; 
} 

#opaque { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
    background: grey; 
    filter: alpha(opacity=70); 
    opacity: 0.7; 
}

источник

2016-02-21 mseifert

Можно использовать

#opaque { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right:0; 
    bottom:0; 
}

удалить width:100% из тела за счет создает горизонтальную полосу прокрутки

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

DEMO

источник

2016-02-21 02:25:26 charlietfl

Ваш ответ также делает трюк. Благодарю. Он дает одинаковые результаты тому, что происходит от sahbeewah. Будет ли предпочтительнее? – mseifert

Честно говоря, я делал это много лет и только что узнал новый трюк из этого другого ответа. Часто существует множество способов достижения такой же цели. – charlietfl

Я просто прочитал, что «фиксированное» позиционирование «относительно окна просмотра», поэтому кажется, что это было сделано для этого. Это также объясняет, почему я никогда не нуждался в этом в прошлом. Благодарю. – mseifert

Вы можете поставить position: relative на вашем теле, так что тело будет использоваться в качестве опорной точки с помощью дочернего элемента с точки зрения высоты (в отличие от document объекта).

источник

2016-02-21 02:21:41 sahbeewah

Ничего себе. Это действительно было просто. Более удивительно то, что это не испортило остальную часть моего сайта. Можете ли вы прокомментировать разницу между вашим решением и тем, что было у charlietfl? Они оба работают. Было бы предпочтительнее. – mseifert

Использование JavaScript, чтобы установить одну элементы высоту, равную anothers

var o = document.getElementById('opaque'); 
var p = document.querySelector('.page-container'); 

o.style.height = window.getComputedStyle(p).getPropertyValue("height");

FIDDLE

источник

2016-02-21 02:27:53 adeneo

Отлично. Спасибо за метод getComputedStyle. Я пойду с чистым решением css для этого, но это поможет в будущем. – mseifert

Как сделать абсолютное положение div заполнить всю область документа

ответ

Смежные вопросы