Verwenden Sie CSS für Ausrichtung und Füllung

Question

Ich möchte ein div, das zwei andere divs, eine obere div und eine untere div enthält. Das obere div sollte nach oben ausgerichtet sein und eine automatische Höhe haben, die vom Inhalt des obersten div abhängt. Das untere div sollte den leeren Bereich des übergeordneten div ausfüllen.

Ich möchte die Ausrichtung nur mit der Verwendung von CSS machen. Ich möchte keine Positionen oder Größen selbst berechnen.

ich versuchte, die folgenden:

1) http://jsfiddle.net/2dUxa/

Problem: Wenn die Eltern der Boden-div nach unten einige Pixel bewegen sollte der Größe verändert wird.

2) http://jsfiddle.net/Th4Mn/

Problem: Wenn die Eltern das unterste div Größe verändert wird, sollte kleiner werden.

Eine Lösung mit der Verwendung von Javascript könnte wie folgt aussehen: http://jsfiddle.net/2dUxa/7/ Ist das eine Lösung ohne die Verwendung von Javascript?

Answer 1

Nun, wie wäre es damit: http://jsfiddle.net/2dUxa/3/

ich beide div position: relative ändern, und geben dem Boden eine height: 100%.

Dann setzen, die #main overflow: hidden;

Answer 2

verwenden unter Markup und CSS ..

Dieses mit Ihrem Code ist check this und unten ist mein Code

​<div id="main"> 

    <header> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p> 
    </header> 

    <footer> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis congue auctor. Proin iaculis blandit erat, nec vestibulum orci ultricies eget. Suspendisse viverra posuere urna, eu eleifend leo imperdiet at. Nulla lobortis, erat elementum placerat sagittis, est tellus hendrerit quam, quis iaculis leo est et mi.</p> 
    </footer> 

</div> 

​#main{ 
width:80%; 
height:300px; 
position:relative; 
background:#ddd;  
} 
header{ 
width:100%; 
height:auto; 
position:absolute; 
top:0; 
left:0; 
background:#aaa;  
} 
​footer{ 
width:100%; 
height:auto; 
position:absolute;  
bottom:0; 
left:0; 
background:#777;  
} 

Überprüfen Sie here laufenden Code. ..