CSS兩個元素自動高度在一個塊內

Question

我試圖把兩個塊放到一個固定高度的塊來創建以下佈局：

-------------- ----------

UL（初始高度= 0），

生長元件上加直至最大高度達到

滾動應該達到最大高度之後加入

------------------------

DIV（初始高度= 100父％）

減小直到達到

分鐘高度---------------------- - 佈局

HTML部分：

<div style="height:100px"> 
    <ul style="max-height:70px;height:auto;overflow:auto"></ul> 
    <div style="min-height:30px;height:auto"> 
    <span>TEST CONTENT</span> 
    </div> 
</div> 

Answer 1

你真的不能只用CSS做乾淨。我建議使用一點jQuery爲這裏你只是在任何給定的時間查詢兩個高度，找出哪個更高，然後設置其他元素匹配

Answer 2

比方說，你的HTML看起來像這樣：

<div id="wrap"> 
    <div id="top"> 
    </div> 
    <div id="bottom"> 
    </div> 
</div> 

然後你的CSS可能看起來像這樣，#wrap高度設置，底部最小高度。 注意h eight 100% !important。

#wrap{ 
    height: 400px; 
    background: #ccc; 
} 
#top{ 
    //height: 200px; for testing 
    background: #f0f; 
} 
#bottom{ 
    height: 100% !important; 
    min-height: 200px; 
    overflow: scroll; 
    background: #000; 
} 

就是那種你在尋找的東西？

雖然如果你可以發佈你已經完成的東西會有幫助。

Answer 3

我不確定DIV的屬性是完全清楚的。請注意，這還不是一個答案，只是太長時間纔會發表評論。

​​

http://jsfiddle.net/V8yuN/

現在，如果你想DIV#content在第一佔用整個高度，但隨後縮減爲DIV#list UL增長，又是什麼您想與DIV#content完成？請注意，我將UL置於DIV之內。

現在，上述小提琴以某種方式演示了您所描述的內容（DIV#content被推到底部）。我的問題是，你的設計中DIV#content的height是什麼？

編輯

請注意，如果您的#containeroverflow: hidden，使#content的height: 100%，那就彷彿#container萎縮出現。

#container { 
    height: 100px; 
    background: grey; 
    overflow: hidden; 
} 
#list { 
    max-height: 70px; 
    overflow: auto; 
    background: #ddf; 
} 
#content { 
    height: 100%; 
    background: #fdf; 
} 

http://jsfiddle.net/V8yuN/2

我不知道，不過，如果這會導致你的設計打破，如果#content的實際內容需要顯示（例如，如果它是動態變化的）。

EDIT 2

下完成的一切，但#content文字的vertical-align：

HTML

<div id="container"> 
    <div id="push"> 
    <div id="list"> 
     <ul></ul> 
    </div> 
    <div id="content"> 
     <div class="border-top"></div> 
     <div id="content-inner"> 
     <span>TEST CONTENT</span> 
     </div> 
    </div> 
    </div> 
    <div class="border-bottom"></div> 
</div> 

CSS

#container { 
    height: 100px; 
    background: grey; 
} 
#push { 
    height: 95px; 
    overflow: hidden; 
} 
#list { 
    max-height: 70px; 
    overflow: auto; 
    background: #ddf; 
} 
#content-inner { 
    min-height: 100px; 
    background: #dfd; 
    margin: 0; 
    border-left: 5px solid #fdf; 
    border-right: 5px solid #fdf; 
} 
.border-top { 
    background: #fdf; 
    border-radius: 5px 5px 0 0; 
    height: 5px; 
} 
.border-bottom { 
    background: #fdf; 
    border-radius: 0 0 5px 5px; 
    height: 5px; 
} 

http://jsfiddle.net/V8yuN/6/