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：如何把页眉和页脚

回答

相关问题