頁眉和頁腳之間的伸展div

Question

我遇到的任務看起來很標準：我有一個固定高度的容器和3個div的內部。我希望第二個div在頂部和底部div之間延伸。當第二個div的內容溢出時 - 我想顯示滾動條。

我知道如何使用absolute定位完成此任務。一個問題是：我可以在div上使用table嗎？

一個額外的要求：如果可能，我想避免設置標題的高度固定。

我試圖在我的小提琴中編碼它，但正如你所見，I failed。

CSS：

.container { 
    height: 500px; 
    background-color: gainsboro; 
} 

.table { 
    display: table; 
    height: 100%; 
} 

.table > div { 
    display: table-row; 
} 

.table > div > div { 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px solid black; 
    overflow: scroll; 
} 

.center > div { 
    height: 100%; 
} 

.content { 
    height: 700px; 
} 

HTML：

<div class="container"> 
    <div class="table"> 
    <div> 
     <div>XXX</div> 
    </div> 
    <div class="center"> 
     <div> 
      <div class="content"></div> 
     </div> 
    </div> 
    <div> 
     <div>YYY</div> 
    </div> 
    </div> 
</div> 

Answer 1

這裏是一個可能的解決方案：

<div class="container"> 
    <div class="header"> 
     <div>Top Header Block</div> 
    </div> 
    <div class="center"> 
     <div class="content"> 
      <p>Lorem ipsum ...</p> 
      <p>Lorem ipsum ...</p> 
     </div><!-- .content --> 
    </div><!-- .center --> 
    <div class="footer"> 
     <div>Bottom Footer Block</div> 
    </div> 
</div> 

和CSS：

.container { 
    height: 200px; 
} 
.header, .footer { 
    background-color: gainsboro; 
} 
.center { 
    height: inherit; 
} 
.content { 
    background-color: #F0F0F0; 
    height: inherit; 
    overflow: auto; 
} 

既然你是固定的容器的高度，你繼承了高度都在.center和.content<div>的。

如果調整容器高度，中心div會展開，但頁眉和頁腳div保持相同的高度。

在內容div上使用overflow以允許滾動。

小提琴參考：http://jsfiddle.net/audetwebdesign/nae5z/

Answer 2

你的方式是正確的，只是做一些修改（見本Fiddle）：

html, body, .container, .table { 
    margin: 0; 
    height: 100%; 
} 

#header,#footer { 
    height: 1px; 
} 

這應該管用 因爲如果內容需要，表格單元格的高度會增加。

只是一個提示：您可以改進整個事情，例如我會使用HTML 5和<header/>和<footer/>元素。但那不是你問題的一部分。總之，這裏是另一個更新您的fiddle：

<div> 
     <header> 
      <div>XXX</div> 
     </header> 
     <main> 
      <div> 
       <div class="content"></div> 
      </div> 
     </main> 
     <footer> 
      <div>YYY</div> 
     </footer> 
</div> 

使用CSS：

html, body, body > div { 
    margin: 0; 
    height: 100%; 
} 

body { 
    background-color: gainsboro; 
} 

body > div { 
    display: table; 
    width: 100%; 
} 

body > div > * { 
    display: table-row; 
} 

body > div > * > div { 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px solid black; 
} 

header, footer { 
    height: 1px; 
} 

main是很新的HTML 5，只是如果你想知道。