3行佈局，頁眉和頁腳固定高度和流體內容但滾動

根據以前的問題和他們缺乏答案的判斷，我不確定這會有什麼好的答案。幸運的是，我們只需要支持較新的瀏覽器。3行佈局，頁眉和頁腳固定高度和流體內容但滾動

尋找一個佈局，讓我們有一個固定大小的頁眉和頁腳的3行，但中心行與瀏覽器的高度是流暢的，但也會在內容太大時滾動。

沒有JavaScript可能嗎？我們嘗試（例如簡化）：

<html style="height: 100%"> 
<body style="height: 100%"> 
<section style="height: 100%; display: table;"> 
    <header style="display: table-row; height: 200px;"> 
    Header 
    </header> 
    <section style="display: table-row; height: 100%; overflow-y: auto;"> 
    Content 
    </section> 
    <footer style="display: table-row; height: 200px;"> 
    </footer> 
</section> 
</body> 
</html>

問題是，當內容部分包含足夠的內容溢出，而不是滾動內容它的高度，延伸它來代替。我曾經希望漂浮的內容可能會有所幫助，但在那裏也不好。

任何想法？

來源

2010-07-12 Nick Spacek

首先，如果您想要固定頁眉和頁腳，需要的絕對（或固定）參考堅持：

.container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

那麼最簡單的和現代的方式來表達自己的頂部/拉伸/底部約束是使用flex顯示，可在頂部至底部的流動方向，沿絕對參考的整個高度：

.content { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}

最後，定義柔性的內容和他們的對齊約束：

header { 
    align-content: flex-start; 
} 
.fluid-and-scrollable { 
    flex: 1; 
    overflow-y: scroll; 
} 
footer { 
    align-content: flex-end; 
}

（注意flex-start和flex-end實際上並不是必需的，因爲元素的HTML中的自然順序意味着它們）。

當然，根據您的瀏覽器支持要求，您必須處理Flexible Box Layout的專有/舊語法。

查看演示here。

編輯：如果你想要這樣的佈局，但對整個視申請，我不會推薦這種解決方案，因爲iOS的不會再壓縮它的瀏覽器吧，如果你不上body滾動。相反，我會推薦一個更直接的老式解決方案，將固定頁眉和頁腳放在body之上（請在移動Safari上檢查此alternative以檢查其差異）。

來源

2014-01-27 11:32:18 Javarome

即使你只需要支持較新的瀏覽器，我認爲有一種解決方案可以完成所有瀏覽器（或者至少大部分）。將其視爲「頁腳推送」解決方案。例如：

CSS：

* { 
margin: 0; 
} 
html, body { 
height: 100%; 
} 
.wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
}

HTML：

<html> 
    <head> 
     <link rel="stylesheet" href="layout.css" ... /> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <div class="header"></div> 
      <div class="article"></div> 
      <div class="push"></div> 
     </div> 
     <div class="footer"> 
      <p>Copyright (c) 2008</p> 
     </div> 
    </body> 
</html>

所以，現在的頁眉和頁腳是一組大小，中間（稱爲文章）將填滿整個屏幕，除非有更多的內容，在這種情況下，它會延伸。如果修改，請小心注意封裝器div的位置，封裝了標題和正文，但不包含頁腳。

來源

2010-07-12 15:46:52 bpeterson76

只是缺少中間的滾動。中間應該拉伸內容以適應頁面，但是如果中間內容對於此太大，則中間div應該滾動，而不是整個頁面。 – 2010-07-13 18:16:45

我知道這是舊的，但我想我會在那裏提出另一個建議。我對瀏覽器的看法是任何人都應該使用支持HTML5的瀏覽器。這肯定取決於網站的目的是什麼，但這裏有一個我使用的設置（在不需要它的情況下也會給你滾動）：

將Doctype設置爲HTML（不要添加所有額外東西）將其歸類爲HTML5網站。

CSS：

* { 
    margin: 0; 
    padding: 0; 
    line-height: 100%; 
} 

body { 
    font: 1em Verdana, Geneva, sans-serif; 
} 

header { 
    width: 100%; 
    height: 150px; 
    background-color: gray; 
} 

section { 
    min-height: 100%; 
    padding-bottom: 100px; 
} 

footer { 
    width: 100%; 
    height: 100px; 
    background-color: #E0E0E0; 
    position: fixed; 
    bottom: 0; 
    left: 0;   
}

HTML：

<body> 

<header> 
    header 
</header> 

<section> 
     <strong>repeat to fill the page when you test overflow</strong> 
      content. test the content. test the content. test the content. test the content. test the content. test the content. 
</section> 

<footer> 
    footer 
</footer> 

</body>

如果你需要檢查的內容區域，只需添加一個邊框屬性的*與像綠色的顏色 - 偉大的方式來看看當你改變它的時候你的地區正在發展。

如果有人不同意，請讓我知道這有什麼問題。如果需要的話，我會使用它來啓動和修改。

[p.s.使用IE，Chrome和Mozilla進行測試 - 同樣...這將滾動頁眉和內容，但不會滾動頁腳。您可以始終使用與頁眉相同的方法，但在頁眉的頂部添加填充以匹配頁眉的高度]

來源

2013-10-11 22:01:14 Steve

3行佈局，頁眉和頁腳固定高度和流體內容但滾動

回答

相關問題