固定頁眉，固定頁腳，全高度多個可滾動列布局

我正在努力應用程序佈局。我只想用HTML & CSS來實現它，但絕望正在臨近。我需要：固定頁眉，固定頁腳，全高度多個可滾動列布局

一個固定的高度，100％的寬度，靜態報頭
一個固定的高度，100％的寬度，靜態頁腳
的固定寬度的內容區域，中心&滿剩餘高度

內容方面的需求：

2列，兩者都是全高

以上內容相當簡單，但可能需要更改以適應下一部分。

每一列都需要：

靜態頭
靜態頁腳
滾動內容區域在頁眉和頁腳

我花了一天嘗試各種方法（間即使是一個基於 - 喘氣表）沒有真正的成功。

|--------------------------------------------------| 
| Fixed height, 100% width, static page header  | 
|----|-------------------|--------------------|----| 
    |Fixed Col 1 header | Fixed Col 2 header | 
    |-------------------|--------------------| 
    | Scroll overflow | Scroll overflow | 
    | Fixed width  | Fixed width  | 
    | Full height  | Full height  | 
    |     |     | 
    |     |     | 
    |-------------------|--------------------| 
    |Fixed Col 1 footer | Fixed Col 2 footer | 
    |     |     | 
|----|-------------------|--------------------|----| 
| Fixed height, 100% width, static page footer  |  
|             |    
|--------------------------------------------------|

來源

2015-03-02 Kevin Welsh

你能顯示你的代碼嗎？在一個jsfiddle。 – floor 2015-03-02 21:28:40

我沒有工作解決方案。但是，這個基於表格的JSFiddle「部分」在IE中工作。在Firefox中不起作用。我已經接近使用'display：table-row;'和'display：table-cell;'重現了表格版本;' http://jsfiddle.net/vna48w5w/1/ – 2015-03-02 21:47:10

感嘆...不要使用表格佈局。除非它想要顯示的表格數據。我會盡力爲你解決這個問題。 – floor 2015-03-02 21:50:08

好吧，看完你的小提琴後，告訴你表格佈局是魔鬼。這是我的解決方案。注意：滾動不起作用，因爲您沒有提供內容......所以您可能需要與此混淆。

因此，這裏的標記

<header> 
    header 
</header> 
<main> 
<div class="col1"> 
    <header>header</header> 
    <div class="foo"> 
     some junk 
    </div> 
    <footer>footer</footer> 
</div> 
<div class="col2"> 
    <header>header</header> 
    <div class="foo"> 
     more junk 
    </div> 
    <footer>footer</footer> 
</div> 
</main> 
<footer> 
    footer 
</footer>

，這裏是樣式

body{ 
    height:100%; 
} 
header, footer{ 
width:100%; 
height:50px; 
background-color:pink; 
} 
main{ 
margin:0 auto; 
height:100vh; 
background-color:blue; 
} 
.col1, .col2 { 
width:50%; 
float:left; 
} 


.col1{ 
background-color:red; 
height:100%; 
} 
.col2{ 
background-color:green; 
height:100%; 
} 
.col1 header, .col1 footer { 
    background-color:purple; 
} 
.col2 header, .col2 footer { 
background-color:yellow; 
} 
.col1 footer{ 
position:relative; 
} 
.foo{ 
width:100%; 
height:82%; 
overflow:scroll; 
}

，你可能需要用它玩了一下，使它看起來要如何。但在小提琴中，如果您將這些放入其中，則會使佈局與您提供的相同。

來源

2015-03-02 22:14:02 floor

感謝發佈這個。也許我不清楚這個部分給我帶來了很大的痛苦如果你看看我的[原創JSFiddle]（http://jsfiddle.net/vna48w5w/1），你可以看到需求的一部分，這使得我很困難。我需要（在你的小提琴中，主要）「內容」是100％的視口高度，而不是頁眉和頁腳。我正在研究一個更新的小提琴[v2鏈接]（http://jsfiddle.net/vna48w5w/2）這是一個類似的版本，無表，但仍然沒有完成。 – 2015-03-03 00:16:06

好的，我有一個工作版本，在IE & Firefox中測試過。

http://jsfiddle.net/vna48w5w/3/

邊界框是相當有幫助的。

-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;

來源

2015-03-03 01:09:41

固定頁眉，固定頁腳，全高度多個可滾動列布局

回答

相關問題