Как сделать div полноэкранным и прокручиваемым?

С абсолютной, она прокручивается, но не получает 100% по высоте:Как сделать div полноэкранным и прокручиваемым?

.class { 
position: absolute; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
height: 100%; 
width: 100%; 
z-index: 1000000; 
background: rgba(0, 0, 0, 0.9); 
}

С фиксированным, он получает 100% по высоте, но не прокручивается

.class { 
position: fixed; 
left: 0; 
top: 0; 
height: 100%; 
width: 100%; 
z-index: 1000000; 
background: rgba(0, 0, 0, 0.9); 
}

Я хотел бы избежать добавив фиксированный привязку к дочернему элементу и сделайте его overflow: scroll

источник

2015-01-21 rob.m

В вашем CSS с 'позиции: absolute', контейнер с' .class' пополнит (или взять размеры ближайшего блока предков с нестатическим позиционированием). Если вы добавите достаточное количество содержимого в контейнер, появится вертикальная полоса прокрутки, потому что избыточное содержимое вызовет условие переполнения (если вы не установите переполнение для скрытия). Цвет фона окрашивается в контейнер '.class' и не применяется к переполненному контенту. Для этого вам нужен вложенный контейнер. Прокомментируйте ваше исходное сообщение. –

@MarcAudet [элементы уровня блока имеют переполнение по умолчанию 'overflow: visible;'] (http://www.w3.org/TR/CSS21/visufx.html#overflow), что означает, что он не начнет прокрутку по умолчанию , Вместо этого он просто переполнит свой контейнер и запускает прокрутку в ближайшем родительском контейнере, который может пройти весь путь до области просмотра. Это приведет к тому, что поле, которое заполняет высоту и ширину окна просмотра, но все еще имеет контент, который нужно прокручивать через окно. Результат не очень хорош: http://jsbin.com/docojuyedi/1 –

Вам нужно добавить overflow:auto так, что она прокручивается, если содержимое переполняет контейнер.

.class { 
    ... 
    overflow:auto; 
}

http://jsbin.com/kuqaqumude/1/edit?html,css,output

Для получения более подробной информации относительно overflow: auto и overflow: visible,
см: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

источник

2015-01-21 15:50:08

, если я добавлю это к первому набору css, где я использую абсолютное значение, он не работает –

Что делать, если содержимое не переполняет его контейнер? Я хочу, чтобы контейнер был на 100% высотой без изменений –

@ rob.m [Он все еще работает] (http://jsbin.com/yekoxisulo/2/edit). Вам все равно нужна ширина: 100%; height: 100% ' –

Так что, прежде всего, если вы хотите иметь высоту и ширину 100%, вам нужно будет определить ЧТО это. Таким образом, вы должны сказать html/body, что размер, который у них есть, составляет 100% ширины/высоты.

Теперь вы не хотите, чтобы страница прокручивалась вниз, если текст выходит из div, потому что вы увидите пробел, если вы это сделаете. Поэтому установите переполнение-y для прокрутки, чтобы он прокручивался внутри div, а не в самом документе.

html,body{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.fullwidth{ 
    width:100%; 
    height: 100%; 
    background-color: red; 
    overflow-y: scroll; 
}

Вот рабочая скрипку:

WORKING FIDDLE

источник

2015-01-21 15:50:00 Refilon

Как сделать div полноэкранным и прокручиваемым?

ответ

Смежные вопросы