修复了带有可滚动内容的页眉和页脚答案

【问题标题】：Fixed header & footer with scrollable content修复了带有可滚动内容的页眉和页脚
【发布时间】：2015-01-08 12:14:32
【问题描述】：

我将页眉和页脚设置为位置：固定。但在可滚动内容的情况下，文本会转到页眉/页脚区域：这是我的完整代码：http://jsfiddle.net/kaqz1km2/6/

在这种情况下，我不想使用背景图像或背景颜色。

这是 CSS：

html, body { height:100%; }
header { position:fixed; width:100%; top:0; margin-top:1rem; }
footer { position:fixed; width:100%; bottom:0; line-height:3rem; }

【问题讨论】：

您只需要为页眉/页脚添加一个固定高度并在您的身体上设置一个填充顶部/底部，没有“正确”的方法来做到这一点。
当然可以，哈哈，你也不想无缘无故地将你的身高设置为100%。

标签： css fixed

【解决方案1】：

你可以在#content中使用padding

同时为header 和footer 提供背景颜色

在这里查看DEMO

#content { padding: 60px 0 }

【讨论】：

由于设计问题，我不想设置背景色。

【解决方案2】：

用

改变你的 CSS

html, body { height:auto; }
header { position:fixed; width:100%;top:0;height:50px;line-height:50px; background-color:#fff;}
footer {position:fixed; width:100%; bottom:0; height:50px;line-height:50px;background-color:#fff;}
nav li { display:inline; text-transform:uppercase; } 
p { width:200px; }
li { margin-right:2rem; }
.container{margin-top:50px;margin-bottom:50px;}

并将1个类容器添加到

 <pre> <div id="content" class="container"> </pre>

【讨论】：