垂直佈局填充窗口與拉伸中間組件

我正在尋找一種方法來執行填充整個窗口的單列垂直佈局。有三種組分時，以該佈局：垂直佈局填充窗口與拉伸中間組件

報頭（恆定的，但未知大小）
體（可變大小，拉伸以填充）
頁腳（恆定的，但未知大小）

我已經完成了頁眉/頁腳固定和已知大小之前的佈局，但我希望它們現在具有動態大小（基於內容）。靈活的盒子模型似乎是爲了讓這個變得容易，但我無法弄清楚如何使它工作（這可能是由於瀏覽器的支持）。

我現在需要的解決方案只適用於FireFox，絕對最新版本可以（比如18或19）。

2012-10-18 edA-qa mort-ora-y

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Header/Footer Vertical Centering Test</title> 
     <style type="text/css"> 
     /* Set document height*/ 
     html, body { height:100%; } 

     /* Set container height and context */ 
     #container { position:relative; min-height:100%; } 

     /* Declare positioned children of container */ 
     #masthead, #footer { position:absolute; } 

     /* Position masthead */ 
     #masthead { top:10px; } 

     /* Position and layer footer */ 
     #footer { bottom:0; z-index: 2; } 

     /* Set fluid height for footer */ 
     #footer { height:5%; } 

     /* Set padding for content header placeholder */ 
     #header { padding-bottom: 10%; } 

     /* Set fluid height and display for middle container */ 
     #middle { height:60%; display:table; padding-bottom: 5%; } 

     /* Set display and vertically centered content */ 
     #vertcenter { display:table-cell; vertical-align: middle; } 
     </style> 
    </head> 

    <body> 

    <div id="container"> 
     <div id="header"></div> 

     <div id="middle"> 
     <div id="vertcenter"> 
      Content 
     </div> 
     </div> 

     <div id="masthead"> 
     header 
     </div> 

     <div id="footer"> 
     footer 
     </div> 
    </div> 

    </body> 

</html>

來源

2013-02-07 19:53:21

垂直佈局填充窗口與拉伸中間組件

回答

相關問題