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

Я пытаюсь использовать CSS для создания эффекта «greyed out» на моей странице, пока загрузочный ящик отображается на переднем плане, пока приложение работает. Я сделал это, создав 100% высоту/ширину, полупрозрачный черный div, который имеет видимость, включенную/выключенную через javascript. Я думал, что это будет достаточно просто; однако, когда содержимое страницы расширяется до такой степени, что экран прокручивается, прокрутка к ноге страницы показывает часть, которая не выделена серым цветом. Другими словами, 100% на высоте div, похоже, относится к размеру видового экрана браузера, а не к фактическому размеру страницы. Как я могу расширить div, чтобы охватить весь контент страницы? Я попытался использовать JQuery .css ('height', '100%'), прежде чем переключать его видимость, но это ничего не меняет.Как сделать div 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; 
}

Спасибо.

источник

2009-06-16 Lee D

он будет работать, чтобы отключить, чтобы полоса прокрутки при отображении вы полупрозрачный серый DIV? Вы действительно хотите, чтобы пользователи могли прокручивать вниз, чтобы увидеть что-то, что они не могут сделать вообще? – Adam

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

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

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

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

Есть также plenty of hacks around to make fixed positioning work in IE6, но они склонны либо налагать некоторые другие ограничения на ваш CSS, либо использовать JavaScript, поэтому они, вероятно, не стоят проблем.

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

источник

2009-06-16 20:02:59 mercator

Если маска отображается с помощью Javascript, что больше Javascript для устранения проблемы с высотой? –

Спасибо, сменив абсолютный на фиксированный, было все, что было необходимо! Справедливая точка относительно ИД. –

@ Lee: Отлично ... @Paolo: Это вряд ли проблема здесь, я должен согласиться. Но в то время как поддержка JS не является проблемой здесь, вы в конечном итоге смешиваете стиль с поведением, и вы можете (слегка) повлиять на производительность тоже. И Ли тоже ответил на ваш вопрос. В этом случае решение JavaScript не было действительно необходимым. – mercator

Если вы используете JQuery, чтобы установить высоту до всплывающего окна, я предполагаю, что это ОК, чтобы добавить больше JavaScript :)

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

источник

2009-06-16 20:05:47 ylebre

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 не был запущен), это будет охватывать всю страницу.

источник

2009-06-16 20:26:26

Вам не нужно использовать 'position: fixed', чтобы предотвратить прокрутку div.screenMask, если базовая страница выше одной высоты видового экрана? –

Это совсем не работает в IE6. В других браузерах ему нужно положение: относительно тела работать, и даже тогда оно работает только при вертикальной прокрутке, а не в горизонтальной прокрутке. – mercator

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

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

body { 
    position: relative; 
}

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

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

Обратите внимание, что ваш элемент <div> будет охватывать рамку <body> (коробка + прокладка + граница), но она не будет покрывать ее маржу. Компенсируйте, установив отрицательные позиции на <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>

Я надеюсь, что это помогает кто-то другой!

источник

2012-08-16 03:32:34

+1, однако я укажу, что даже это спорный подход, когда изменение положения прокручиваемого контейнера относительно родственника может иметь непредвиденные последствия. К счастью для меня, сегодня мой прокручиваемый контейнер уже относительный! Хитрость использования 'position: absolute' в сочетании с' left', 'right',' top' и 'bottom' иногда является реальной спасательной средой и всегда легко забыть о ней. –

Позиционирование относительно 'body' почти решает его, но установка высоты тела на 100% не является полезным решением: хотя оно фиксирует страницы, которые не заполняют окно просмотра, он разбивает большие, т. Е. Тело будет иметь только высоту видового экрана , Кроме того, установка 'min-height: 100%' на тело, кажется, ничего не делает (Firefox). –

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

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

источник

2014-09-18 12:43:27

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

ответ

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