Абсолютно позиционированный элемент, не расширяющийся с прокручиваемым содержимым (более 100%)

Question

Абсолютно позиционированный элемент, не расширяющийся с прокручиваемым содержимым (более 100%)

0

У меня есть всплывающее окно, в котором элемент, называемый fade, должен распространяться на всю ширину экрана (он делает это, когда нет прокручиваемого содержимого). Однако, когда контент превышает 100% окна браузера, он не распространяется на 100% высоты страницы.

Если я устанавливаю html, body { height: 100%; overflow-y: hidden; } html, body { height: 100%; overflow-y: hidden; } html, body { height: 100%; overflow-y: hidden; } Я получаю результат, который хочу, но потом у меня есть 2 полосы прокрутки с правой стороны.

http://jsfiddle.net/Dpqg5/

HTML

<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>

CSS

#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }

Любые идеи о том, как заставить этот элемент полностью расширяться до высоты веб-браузера, даже если есть более прокручиваемый контент?

user934902 17 фев. 2014, в 00:59

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Tims · Accepted Answer · 2014-02-16T22-27-00.000Z

установите ваш fade css для:

#fade { 
  display: none;
  background-color: rgba(0,0,0,0.5); 
  position: fixed; 
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}