2010-02-19 18 views
12

Ich habe ein div mit 2 Elementen.Get CSS Div, um die verfügbare Höhe zu füllen

<div id="master"> 
     <div id="follower"></div> 
     <div id="decider"></div> 
<div> 

'Master' div die folgenden CSS-Eigenschaften

height:auto; 
width:auto; 
margin:0; 
padding:10px; 
display:block; 

Die 'Folgers' hat div die folgenden CSS-Eigenschaften

position:relative; 

vertical-align:middle; 
height: auto; 

display: inline-block; 

margin-top: 0px; 
margin-bottom:0px; 

Die 'decider' hat entscheidet div, wie groß die " Master 'div ist. Ist es möglich, dass das "Follower" -Div so viel vertikalen Raum im "Master" -Div wie möglich füllt?

Ich versuchte height: 100% aber das machte nur die 'Mitläufer' div den ganzen Bildschirm (vertikal) nehmen

Antwort

27

Der Master

position: relative; 

und dann sollte der Nachfolger haben

position: absolute; 
top: 0; 
bottom: 0; 
haben sollte

Das sollte funktionieren, außer in IE6 (die eine alarmierende Menge von Menschen immer noch verwendet, aber ich würde einfach ignorieren und ihnen sagen, ihren Browser zu aktualisieren)

+0

Ja, das funktioniert. Es hat jedoch (scheinbar) dazu geführt, dass die Inline-Block-Einstellung in "Follower" ignoriert wurde. – jameszhao00

+2

@ jameszhao00, weil ein 'position: absolute' Element aus dem Dokumentenfluss entfernt wird, also gibt es nichts, was inline * mit * sein kann. –

+4

dies funktioniert nicht für Divs in Tabellenzellen –

Verwandte Themen