CSS: сделать контейнер нужным экрану

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

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

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

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

3 2
html css overflow

3 ответа:

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

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

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

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

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

1

ОК разобрался

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

min-height: 100%;

К телу

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

Внизу: 0;

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

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

1

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

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

0