So erstellen Sie eine Fluidhöhe Div?

Question

Hinweis: Ich lerne immer noch CSS & HTML, also wenn diese Frage "noobish" scheint - das ist, weil es ist. Wenn Sie ein Beispiel geben könnten, oder einen Artikel, der auf meine Fragen ausgerichtet ist, wäre das großartig.

Ich habe ein Div ("Hintergrund") erstellt, das zwei Divs enthält ("links" & "rechts").

Ich möchte die "Hintergrund" div Höhe zu erweitern oder zu kontrahieren, basierend auf der Menge an Inhalt in der "links" & "rechts" div.

#background { 
width:100%; 
height:15em; 
background-color:#FFF; 
box-shadow: 0 0 5px #888; 
-moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
clear:both; 
} 

Im Moment habe ich den „Hintergrund“ div Höhe auf 15em gesetzt, weil ich nicht sicher bin, wie es ausdehnen oder zusammenziehen zu lassen. Ich habe versucht, es auf "100%" und "Auto" zu setzen, aber diese machen nur das "Hintergrund" div verschwinden.

Hier ist meine gesamte HTML & CSS-Code: http://jsfiddle.net/jueRh/

Answer 1

Wenn Sie Ihren Container div ohne height Wert verlassen, wird es einen ausziehbaren Behälter werden, um es Inhalt ist.

Wenn Sie weiterhin möchten, dass Ihre div eine bestimmte Höhe hat, aber auf überflogenen Inhalt erweitert, können Sie min-height verwenden. Auch Sie beachten Sie, dass min-height nur von gleich oder über enlisted browsers in this link.

EDIT unterstützt: Wenn Sie jedoch float ed div s im Inneren des Behälters verwenden werden, müssen Sie clear den Schwimmer für die richtige Darstellung. Sie können auch display:inline-block für eine float Alternative verwenden, die dann können Sie die clear ing überspringen, aber that is also support limited.

Answer 2

Set overflow: hidden; in #background und entfernen Sie die height:15em; Erklärung.

Demo: http://jsfiddle.net/sonic1980/jueRh/1/