Как сделать div на 100% страницы (не экрана)?

Я пытаюсь использовать CSS для создания эффекта "greyed out" на моей странице, пока поле загрузки отображается на переднем плане, пока приложение работает. Я сделал это, создав 100% высоту/ширину, полупрозрачный черный div, который имеет видимость, включенную/выключенную через javascript. Я думал, что это будет достаточно просто; однако, когда содержимое страницы расширяется до такой степени, что экран прокручивается, прокрутка к ноге страницы показывает часть, которая не выделена серым цветом. Другими словами, 100% на высоте div, похоже, относится к размеру видового экрана браузера, а не к фактическому размеру страницы. Как я могу расширить div для охвата всего содержимого страницы? Я попытался использовать JQuery.css('height', '100%'), прежде чем переключать его видимость, но это ничего не меняет.

Это CSS соответствующего div:

div.screenMask
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

Спасибо.

Ответы

Ответ 1

Если вы измените position: absolute на position: fixed, он будет работать во всех браузерах, кроме IE6. Это фиксирует div в окне просмотра, поэтому при прокрутке он не выходит из поля зрения.

Вы можете использовать $(document).height() в jQuery, чтобы он работал в IE6 тоже. Например.

$('.screenMask').height($(document).height());

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

Есть множество хаков, чтобы сделать работу с фиксированным позиционированием в IE6, но они склонны либо накладывать некоторые другие ограничения на ваш CSS, или использовать JavaScript, поэтому они, вероятно, не стоят проблем.

Кроме того, я предполагаю, что у вас есть только одна из этих масок, поэтому я бы предложил использовать идентификатор для него вместо класса.

Ответ 2

Я понимаю, что я отвечаю на это долго, долго после того, как его спросили, но я приземлился здесь, после того, как я кратко остановился на этой проблеме, и ни один из текущих ответов не верен.

Здесь правильный ответ:

body {
    position: relative;
}

Что это! Теперь ваш элемент будет располагаться относительно <body>, а не области просмотра.

Я бы не стал беспокоиться о position: fixed, так как его поддержка браузера остается пятнистой. Safari до iOS 5 вообще не поддерживал его.

Обратите внимание, что ваш элемент <div> будет охватывать <body> border-box (box + padding + border), но он не будет покрывать его маржу. Компенсируйте, установив отрицательные позиции на <div> (например, top: -20px) или удалив маркер <body>.

Я также рекомендовал бы установить <body> на height: 100%, чтобы гарантировать, что вы никогда не окажетесь в частично скрытом окне просмотра на более короткой странице.

Два действительных пункта, взятых из предыдущих ответов. Как говорит Бен Бланк, вы можете потерять объявления width и height, вместо этого расположив все четыре угла. И меркатор прав, что вы должны использовать идентификатор вместо класса для такого важного отдельного элемента.

Это оставляет следующий рекомендуемый полный CSS:

body {
    position: relative;
    margin: 0;
}

#screenMask {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 1000;
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

И HTML:

<body>
    <div id="screenMask"></div>
</body>

Я надеюсь, что это поможет кому-то еще!

Ответ 3

div.screenMask
{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

Установив все top, bottom, left и right, высота и ширина вычисляются автоматически. Если screenMask является прямым дочерним элементом элемента <body>, и действует стандартная модель окна (т.е. Режим quirks не был запущен), это будет охватывать всю страницу.

Ответ 4

Если вы хотите всплывающее окно с эффектом наложения, вы можете использовать этот шаг.

<style>
.overlay{
 background:#000;
 opacity:0.5;
 position:fixed;
 z-index:1;
 width:100%;
 height:100%;
}
.popup{
 width:500px;
 margin:auto;
 position:fixed;
 z-index:2;
 height:300px;
}
</style>
<div class="overlay"></div>
<div class="popup">
      Hello everyone
</div>

Ответ 5

Если вы используете jQuery для установки высоты перед всплывающим окном, я предполагаю, что это нормально, чтобы добавить еще несколько javascript:)

Вы можете установить высоту div на scrollHeight документа .body - таким образом он должен покрыть весь тело. Вам нужно добавить дополнительные уловки, чтобы убедиться, что он продолжает покрывать тело, если что-то под ним решает расти.