三排流體滾動中心CSS布局

Question

我目前正在為我正在開發的應用程序構建HTML和CSS。

此應用程序有一個固定的高度標題，一個固定的高度頁腳和一個應占據其余空間的中間區域。

問題是我希望頁眉和頁腳在整個時間內保持固定，而內容如果變得太大則會滾動。

我已經能夠將頁眉和頁腳固定到位的情況下滾動內容，但這會使用push div使得滾動條消失在標題后面，另一個選項使它在頁腳后面消失..我有一個很難讓div在超過最大尺寸時滾動而不給它100％的高度。

這是我到目前為止：

http://jsfiddle.net/7gmpu/

純CSS可以實現嗎？ 或者我每次調整大小時都必須使用javascript計算窗口高度？

我的“解決方案”是否接近？

Answer 1

如果要修復元素，則必須使用CSS定位。 您當前的解決方案已經接近，但它有點復雜。

假設你想擁有三個街區：

HEADER
CONTENT
FOOTER

最自然的方式是將它們全部放在容器中（如果您的網站只包含這3個元素，則不需要）並將它們置於絕對位置。 對於HEADER頂部為0，對於FOOTER底部為0.在CONTENT中，您必須調整頂部和底部以確保它將是頁腳/標題的高度。

因此，如果你使用#wrapper，＃header，＃content和#footer，這就是你需要的代碼：

#wrapper{position:absolute; top:0;bottom:0;width:100%;}
#header, #footer, #content{position:absolute; width:100%;}
#header{top:0; background-color:#faa;height:50px;}
#content{top:50px;bottom:150px; overflow:auto;}
#footer{bottom:0px; background-color:#afa; height:150px}

演示

編輯 ： 您更新的演示 。 如果要使用固定定位，請不要指定高度值。 通過定義top和bottom來使用隱式高度。 也可以使用overflow:auto滾動條。 我做了以下更改：

#mid {
    background:    #222;
    /* dropped height */
    bottom:50px; /* implicit height */
    overflow:auto; /* automatical scrollbars */
    width:        100%;    
    position:    fixed;
    top:        100px;
}

Answer 2

您可以使用非常少的標記來實現所需的效果。 鑒於HTMl看起來像

 <header>
     Header
 </header>
 <div id="container">
     <article class="post">
         A1;
     </article>
     <article class="post">
         A2;
     </article>
     <article class="post">
         A3;
     </article>
     <article class="post">
         A4;
     </article>
     <article class="post">
         A5;
     </article>
 </div>
 <footer>
     footer
 </footer>?

你可以使用以下css設置它的樣式：

 * {
     box-sizing: border-box;
 }

 html, body {
     height: 100%;
 }

 body {
     padding-bottom: 5em;
     padding-top: 7em;
     position: relative;
 }

 body > div#container {
     position:absolute;
     top: 7em;
     bottom: 5em;
     width: 100%;
     overflow-y: scroll;
     min-height: 3em;

 }

 body > header {
     height:7em;
     position:relative;
     margin-top: -7em;
 }

 body > footer{
     height:5em;
     position: absolute;
     bottom: 0;
 }

你應該准備好了。 你可以在這里看到一個實例： http ： //jsfiddle.net/ramsesoriginal/Mg4Ad/

另外，在上述的代碼header是7em時， footer 5em和#container面積縮小到3 em ;