Сделайте абсолютно позиционное растяжение div до 100% высоты документа без JavaScript

Question

Сделайте абсолютно позиционное растяжение div до 100% высоты документа без JavaScript

0

Есть ли какой-нибудь опрятный CSS-единственный способ сделать абсолютно позиционированный элемент div растягиваться в нижней части документа (а не только в окне браузера)?

По сути, элемент div является фоном модального всплывающего окна, накладывающимся на остальную часть приложения. Он должен охватывать всю страницу - сверху вниз. Однако, когда содержимое больше, чем окно браузера, высота по-прежнему только увеличивает размер элемента до высоты окна (и содержимое выходит из div).

#background{
    background-color: green;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#content{
    color: white;
    height: 200%; /* simulate a lot of content - just put a large value in here */
}

Используется следующим образом:

<body>
    <div id="background">
        <p id="content">a</p>
    </div>
</body>

Например, посмотрите на http://jsfiddle.net/TuNSy/: зеленый фон простирается до видимой части родительского элемента, но когда вы прокрутите вниз, вы увидите, что он фактически не растягивается до дно.

Есть еще несколько вопросов, но они не относятся к моей проблеме:

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

Aaa 25 апр. 2014, в 12:02

Источник

Теги:

html

css

document

absolute

1 ответ

Ещё вопросы

Pete · Accepted Answer · 2014-04-25T08-12-00.000Z

Проблема в том, что ваш абсолютно позиционированный div больше вашего тела, поэтому у вас проблема белого фона. Если вы просто добавляете overflow:auto; на ваш #background, он должен правильно обрабатывать переполнение

пример

Я предполагаю, что моя путаница заключалась в том, что значение "auto" для свойства "overflow" не выглядело так, как будто оно выполнило бы то, что я хотел ("Если переполнение обрезано, необходимо добавить полосу прокрутки, чтобы увидеть остальную часть содержимого"). ), поэтому я не учел это. Я полагаю, что «следует» не означает, что браузеры на самом деле делают это, они могут вообще не показывать один. Спасибо, что поделились таким простым и неинвазивным решением.