jQuery на div div со 100% высотой экрана

Question

jQuery на div div со 100% высотой экрана

0

Я использую jquery для создания оверлейного div, когда я нажимаю #Thumb следующим образом:

$('#Thumb').click( function() { 
     $('body').append('<div id="overlayFrame" onclick="unloadPhoto()" style="position:absolute;width:100%;height:100%;top:0px;left:0px; background: rgba(0, 0, 0, 0.8); z-index:100;"></div>');
});

Проблема в том, что высота 100% работает только для видимой области, все области, которые мне нужно прокрутить, не покрываются div.

Любые идеи, как я могу заставить div быть 100% всей страницы, не зависящей от разрешения экрана?

благодаря

John 04 апр. 2014, в 17:44

Источник

3

использовать фиксированное положение, чтобы во время прокрутки он оставался на одном месте
Patrick Evans 04 апр. 2014, в 14:46

Теги:

javascript

jquery

html

css

2 ответа

0

Установите высоту вашего div равным высоте документа с помощью $( document).height() как height:'+$( document).height()+'px;

Пытаться:

$('#Thumb').click( function() { 
     $('body').append('<div id="overlayFrame" onclick="unloadPhoto()" style="position:absolute;width:100%;height:'+$( document ).height()+'px;top:0px;left:0px; background: rgba(0, 0, 0, 0.8); z-index:100;"></div>');
});//-------------------------------------------------------------------------------------------------------------------^ ADD THIS

DEMO

+1 Патрик Эванс, вы можете просто изменить положение от absolute до fixed так:

 $('#Thumb').click( function() { 
     $('body').append('<div id="overlayFrame" onclick="unloadPhoto()" style="position:fixed;width:100%;height:100%;top:0px;left:0px; background: rgba(0, 0, 0, 0.8); z-index:100;"></div>');
});

demo2

laaposto 04 апр. 2014, в 12:34

Ещё вопросы

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

Derek S · Accepted Answer · 2014-04-04T13-21-00.000Z

Используйте фиксированное позиционирование.

$('#Thumb').click( function() { 
     $('body').append('<div id="overlayFrame" onclick="unloadPhoto()" style="position:fixed;width:100%;height:100%;top:0px;left:0px;right:0;bottom:0;background: rgba(0, 0, 0, 0.8); z-index:100;"></div>');
});

Обратите внимание на добавление right:0 и bottom:0 чтобы растянуть наложение до размера окна просмотра.

демонстрация