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

Я пытаюсь использовать CSS для создания "серого" эффекта на моей странице, когда окно загрузки отображается на переднем плане во время работы приложения. Я сделал это, создав 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;
}

спасибо.

5 51
html css

5 ответов:

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

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

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

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

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

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

51

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

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

body {
    position: relative;
}

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

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

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

я бы также рекомендовал установить <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>

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

16
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> элемент и стандартная модель коробки в действии (т. е. режим причуд не был вызван), это будет охватывать всю страницу.

3

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

<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>
2

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

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

1