CSS：如何把頁眉和頁腳

-2

之間的內容我想要做一個網頁，3部分：CSS：如何把頁眉和頁腳

頭（頁面的頂部）
頁腳（底部頁面）
內容 - 頁眉和頁腳之間沒有滾動條（是單張地圖）。內容在標題末尾開始，並在頁腳開始處結束。

在這一刻我有position:fixed頁眉和頁腳。

我需要在內容中添加哪些CSS規則以在這兩個部分之間進行調整？

我的問題是，如果我調整像素的內容高度不工作在每個屏幕上，只在我的。

header, 
 
footer { 
 
    position: fixed; 
 
    height: 30px; 
 
    width: 100%; 
 
} 
 
header { 
 
    background-color: red; 
 
    top: 0; 
 
} 
 
footer { 
 
    background-color: blue; 
 
    bottom: 0; 
 
} 
 
section { 
 
    background-color: black; 
 
    margin-top: 30px; 
 
    overflow: hidden; 
 
    height: 300px; /*But this is not working in all screens! */ 
 
    width: 100%; 
 
}

<header></header> 
 
<section></section> 
 
<footer></footer>

太謝謝你了！

來源

2016-04-15 Aral Roca

尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve） –

嘗試使用vh單元http://caniuse.com/#feat=viewport-units –

我添加了一個示例代碼 –

所以在這個例子中，我使用30px的頁眉和30px的頁腳。

section { 
    height: calc(100vh - 60px); 
    top: 30px; 
}

它計算100vw（視高度，類似百分比）減去60像素（30像素的頭，30頁腳），然後它的位置是正確的標題下：使用此代碼。

我希望這對你有用。

來源

2016-04-15 08:30:08 Philipp

完美，正在工作。謝謝！ –

CSS：如何把頁眉和頁腳

回答

相關問題