Высота дочернего div переполняет родительский контейнер

Question

Нам нужно установить вертикальную полосу прокрутки для текста переполнения div. Проблема в том, что когда мы устанавливаем высоту на 100% и переполняем на auto, он расширяется за пределы родительского контейнера из-за другого предшествующего элемента div. Вот пример:

<style type="text/css">
    .container {height: 100px; width: 100px; border: solid;}
    .titlebar {height: 2em; background: gray;}
    .app-body {height: 100%; overflow: auto; background: lightblue;}    
</style>

...

<div class="container">
    <div class="titlebar"></div>
    <div class="app-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.</div>
</div>

app-body, установленный на 100%, заставляет его иметь высоту 100px, что делает его переполненным за нижнюю часть container на 2em. Мы попытались вообще не использовать высоту для app-body, но это приводит к ее переполнению без отображаемой полосы прокрутки.

Я знаю, что мы могли бы установить высоту на меньший процент или фиксированное количество пикселей, но это вызовет проблемы для нас, если размер шрифта изменится. Если высота 100% - 2em действительна, то это будет эффективно то, что мы пытаемся определить.

Answer 1

Попробуйте, установив абсолютное позиционирование тела приложения, а затем установив верхнюю часть на 3em, а остальные на 0:

<style type="text/css">
  .container {height: 100px; width: 100px; border: solid; 
      position: relative;}
  .titlebar {height: 2em; background: gray; 
      position: relative;}
  .app-body {height: auto; overflow: auto; background: lightblue; 
      position: absolute; top: 2em; left: 0; right: 0; bottom: 0;}    
</style>

PS: выше тестировалось на браузерах FF3.6, IE8, Webkit.

Answer 2

Вы можете установить .container на переполнение: скрыто так:

<style type="text/css">
.container {height: 100px; width: 100px; border: solid;overflow: hidden;} 
</style>

Надеюсь, это поможет