Контейнер DIV растягивается при изменении размера, но не при прокрутке

У меня есть главный <div>, который центрирован на экране, а высота - это общий размер высоты окна просмотра. Когда я изменяю размер браузера, он работает нормально, но если у меня есть контент под видимым окном браузера и мне нужно прокрутить вниз, <div> становится статическим и принимает размер, который он имел при прокрутке. Что здесь нужно изменить, чтобы контейнер <div> правильно менял размер при прокрутке?

    .container1
          {
           width:80%;
           height:100%;
          -webkit-box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75);
          -moz-box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75);
           box-shadow: 0px -1px 18px 1px rgba(0,0,0,0.75);
           position:absolute;
           left:10%;
           border:1px;
           top:0px;
           border-style:solid;
           border-color:black;
           background-image: url(../img/albg.png) ;
           background-repeat:no-repeat;
           background-position:inherit;
           background-size:auto;
           z-index:-2;
           }

html css responsive
person John Rose    schedule 13.01.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Используйте min-height вместо высоты JsFiddle

min-height:100%;
/* height:100%; */
person NicolaPasqui    schedule 13.01.2016
comment
Результат такой же с минимальной высотой - person John Rose; 13.01.2016
comment
вы удалили правило высоты: 100%? пожалуйста, взгляните на мой JsFiddle - person NicolaPasqui; 13.01.2016
comment
Да, я заменил его значением min-height. Может быть, проблема в последующих div'ах, которые у меня там есть? Кстати, спасибо за быстрый ответ - person John Rose; 13.01.2016
comment
есть ли дочерние блоки с плавающей запятой или position: absolute; ? не могли бы вы опубликовать дочерние блоки css? - person NicolaPasqui; 13.01.2016

arrow_upward
1
arrow_downward

Проблема здесь в том, что вы пытаетесь использовать процент для роста. Ниже приведена еще одна статья SO, в которой подробно объясняется, почему это не работает. Короткий ответ, если вы используете пиксели или em / rem для высоты, он будет работать, но не в процентах.

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

CSS - почему не работает процентная высота?

person Zanderi    schedule 16.04.2018