基於內容的中間容器自動高度

我想創建一個框，中間div的高度發生變化以反映內容。中間內容將包含<li>'s，它可能在高度上從一頁到另一頁不同。一個簡單的示意圖：基於內容的中間容器自動高度

[-- 1. fixed --] 
[-- 2. flex --] 
|-- flex --| 
|-- flex --| 
[-- flex --] 
[-- 3. fixed --]

的問題是我需要的第三部分，總是有全高和允許內容流過它，然後使用中間部分墊掉多餘的。這是目前的標記我有（其中1固定最高，2爲中，3是底部）：

<div class="box"> 
    <div class="top"> 
     <h4>Title</h4> 
    </div> 
    <div class="middle"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
      <li>Item 5</li> 
     </ul> 
    </div> 
    <div class="bottom"></div> 
</div>

和CSS

.top { 
    background: url('/img/box_top.png') no-repeat; 
    height: 10px; 
} 

.middle { 
    background: #000; 
} 

.bottom { 
    background: url('/img/box_fot.png') no-repeat; 
    height: 150px; 
}

什麼是最好的方式讓中間div根據內容調整它的高度？

來源

2012-09-03 xylar

你是中間div會自動調整它的高度以適應它的內容。 –

@BillyMoat啊等，我需要重新說我的問題！我需要底層類中的背景圖像始終保持100％的高度，並在其頂部顯示內容。剛剛完成了。 – xylar

在你的問題中沒有關於背景圖片的單詞... – feeela

BillyMoat之後指出我原來的問題有缺陷，我解決了。

我已經爲底部<div>添加了一個負邊距以匹配高度。

.bottom { 
    background: url('/img/box_footer.png') no-repeat; 
    margin: -150px 0 0px 0; 
    height: 150px; 
}

來源

2012-09-03 10:59:56 xylar

基於內容的中間容器自動高度

回答

相關問題