Создание прокручиваемой области внутри div, которая заполняет родительский контейнер?

Question

Я пытаюсь создать что-то вроде следующего:

Внутри контейнера, я хочу, чтобы иметь заголовок фиксированного размера, а затем прокручивать ДИВ под ним, который заполняет все остальное пространство , Кажется, я об этом ошибаюсь, так как, когда я пытаюсь установить высоту прокручиваемого div на 100%, она выскакивает из тела контейнера.

Вот что я придумал до сих пор:

HTML

<div class="container"> 
    <div class="top-part"> 
     Hello! 
    </div> 

    <div class="scrollable-bottom"> 
     <h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1 
    </div> 
</div> 

CSS

.container { 
    width: 400px; 
    height: 400px; 
    border: 1px solid #cacaca; 
} 

.top-part { 
    width: 100%; 
    height: 70px; 
    border: 1px solid #cacaca; 
} 

.scrollable-bottom { 
    height: 100%; 
    overflow-y: scroll; 
    background-color: rgba(255, 255, 247, 0.4); 

} 

Если вы извлекаете скрипку here, вы увидите что scrollable-bottom стреляет за пределы container. Я не могу понять, почему это так.

Не соответствует ли свойство height высоте родительских элементов? Если да, то почему это не ограничивается?

Answer 1

height: 100%; означает 100% от родительской высоты элементов, поэтому, если высота родителя составляет 400 пикселей, высота ребенка также будет равна 400 пикселей.

Вы можете уйти от расчета размеров вашего .scrollable-bottom самостоятельно, используя функцию calc().It's supported in modern browsers

Вы можете также избавиться от магических чисел путем изменения окна модели поведения .top-part и .scrollable-bottom, установка box-sizing: border-box; для .top-part и .scrollable-bottom Это изменит свое поведение, чтобы содержать Прокладки и границы внутри определенной ширины/высоты области коробки не вместо расширения его с помощью отступа и границы ширина/высота

Таким образом, вам больше не нужно беспокоиться об изменении .scrollable-bottom высота/ширина всякий раз, когда вы добавляете или удаляете прокладку или рамку к нему или .top-part

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid #cacaca; 
 
} 
 
.top-part, 
 
.scrollable-bottom { 
 
    box-sizing: border-box; 
 
} 
 

 
.top-part { 
 
    width: 100%; 
 
    height: 70px; 
 
    border: 1px solid #cacaca; 
 
} 
 

 
.scrollable-bottom { 
 
    height: calc(100% - 70px); /* parent height - .top-part height */ 
 
    overflow-y: scroll; 
 
    background-color: rgba(255, 255, 247, 0.4); 
 
}

<div class="container"> 
 
    <div class="top-part"> 
 
     Hello! 
 
    </div> 
 

 
    <div class="scrollable-bottom"> 
 
     <h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1 
 
    </div> 
 
</div>

Answer 2

Вы абсолютно правы. Высота 100% относится к полной высоте контейнера. Но также обратите внимание, что здесь должна быть рассчитана верхняя высота бара.

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

*{ 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid #cacaca; 
 
} 
 

 
.top-part { 
 
    width: 100%; 
 
    height: 70px; 
 
    border: 1px solid #cacaca; 
 
    position: relative; 
 
    z-index: 2; 
 
    background: white; 
 
} 
 

 
.scrollable-bottom { 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
    padding-top: 70px; 
 
    margin-top: -70px; 
 
    background-color: rgba(255, 255, 247, 0.4); 
 
     
 
}

<div class="container"> 
 
    <div class="top-part"> 
 
     Hello! 
 
    </div> 
 
    
 
    <div class="scrollable-bottom"> 
 
     <h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1> 
 
    </div> 
 
</div>

Answer 3

В Вашей высоте контейнеров 400px и высота 70px покрыта жатки. Просто дайте max-height:330px прокручиваемому div. Это решит вашу проблему. Вот результат http://jsfiddle.net/o2307qup/2/

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