CSS: make container fit screen

Question

Я работаю над сайтом с двумя контейнерами: боковой панелью и основным контентом. Проблема заключается в том, что при минимизации окна (только) левая боковая панель соответствует размеру текущего размера экрана и при прокрутке боковой панели исчезает .. Это происходит только тогда, когда контейнер содержимого (справа) не заполняется экран.

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

Вы можете попробовать good page с большим содержанием, вы увидите, что все это хорошо здесь ..

Я попытался height="100%" and width="100%"

Answer 1

OK Фигурные его

мне пришлось добавить:

min-height: 100%; 

к телу

и использовать

внизу: 0;

на боковой панели

Спасибо за вашу помощь :)

Answer 2

Я предполагаю, что контейнеры дивы?

Ширина должна быть 100%, как у вас есть, но для высоты, попробуйте: line-height:100%.

Answer 3

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

Следовательно, установка высоты или минимальной высоты на элемент тела не будет работать, поскольку она будет занимать только высоту окна просмотра и ничего больше. Детский контейнер, будучи абсолютно позиционированным, также будет подниматься на высоту видового экрана.

Прокрутка по-прежнему возможна по достоинству, что содержимое переполнено от любого из абсолютно позиционированных детей.

Вы можете попробовать установить height: auto на элемент боковой панели. В качестве альтернативы, вы должны плавать свою обертку и боковую панель (и вынимать абсолютное позиционирование) - это по крайней мере помещает содержимое обратно в поток документов, позволяя браузеру вычислять фактическую высоту 100% :)

Абсолютное позиционирование - это Я должен признать, что это немного сложная проблема.