Höhe des untergeordneten Divs übersteigt den übergeordneten Container

Question

Wir müssen eine vertikale Bildlaufleiste für Überlauftext eines Divs einrichten. Das Problem ist, wenn wir die Höhe auf 100 % und den Überlauf auf Auto setzen, wird der Text über den übergeordneten Container hinaus ausgedehnt, weil ein anderes, vorgelagertes Div vorhanden ist. Hier ist ein Beispiel:

<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 auf 100% gesetzt ist, hat sie eine Höhe von 100px, wodurch sie über den unteren Rand der container par 2em . Wir haben versucht, überhaupt keine Höhe zu verwenden für app-body aber das führt dazu, dass es überläuft, ohne dass die Bildlaufleiste angezeigt wird.

Ich weiß, dass wir die Höhe auf einen geringeren Prozentsatz oder eine feste Anzahl von Pixeln festlegen könnten, aber das würde zu Problemen führen, wenn sich die Schriftgröße ändert. Wenn eine Höhe von 100% - 2em gültig wäre, dann wäre das genau das, was wir zu definieren versuchen.

Answer 1

Versuchen Sie dies, indem Sie die Positionierung des App-Körpers auf absolut setzen und dann den oberen Rand auf 3em und den Rest auf 0 setzen:

<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: Getestet mit den Browsern FF3.6, IE8 und Webkit.

Answer 2

Sie können den Überlaufwert für .container a hidden etwa so:

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

Ich hoffe, das hilft