未知頁眉，頁腳高度和中間內容與滾動？

我想創建一個頁面，將具有未知高度（或最小高度）的頁眉和頁腳div和中間內容與滾動，如果內容增加，所有這三個只適合在屏幕上。未知頁眉，頁腳高度和中間內容與滾動？

我在下面試過，如果頁眉和頁腳的高度是固定的，並且只有中間內容增加，那麼我會完美滾動內容div。如何處理頁眉和頁腳的未知高度部分以使其適合？我給了最小高度，但不起作用。

#Pageheader { 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
height: 100px; 
background-color: Blue; 
} 

#Pagefooter { 
position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
height: 100px; 
background-color:red; 
} 

#Pagecontent { 
position: fixed; 
top: 100px; 
bottom: 100px; 
left: 0; 
right: 0; 
background-color: #EEEEEE; 
overflow: auto; 
}

和HTML側

<body> 
<form id="form1" runat="server"> 
<div id="Pageheader"> 
</div> 
<div id="Pagecontent"> 

</div> 
<div id="Pagefooter"> 
</div> 
</form>

來源

2014-03-26 Abhishek Ranjan

醇」學校骯髒的方法是使用jQuery。根據窗口高度和之前的高度檢測頁眉/頁腳的高度，放置和調整內容div的大小。

一個成熟的解決方案是使用Flexbox。使用align-content：stretch可以創建你想要的佈局。 您可以check it here.

來源

2014-03-26 20:42:40 gramgram

我被困在上週嘗試同樣的事情。我結束了與CSS表（與所有瀏覽器，包括IE8兼容）。下面是它的CSS：

/* Layout-1 |頁眉頁腳*/

html { 
    min-height: 100%; 
} 

html, body { 
    height: 100%; 
    width: 100%; 
} 

body { 
    display: table; 
} 

header, footer { 
    display: table-row; 
    padding: 30px; 
} 

div#container { 
    display: table-row; 
    height: 100%; 
}

如果你想要一個固定的頁眉和頁腳和滾動隻影響的標記和CSS的主體部分將是完全不同的，並利用position: absolute;

讓我知道這是否適合你：）

來源

2014-06-28 21:16:30 Costa

未知頁眉，頁腳高度和中間內容與滾動？

回答

相關問題