Question

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

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

这就是CSS：

＆＃13;

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

＆＃13;

Answer 1

您可以在padding

中使用#content

还为header和footer

提供背景颜色

点击DEMO

#content { padding: 60px 0 }

Answer 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>

固定标题＆amp;具有可滚动内容的页脚

2 个答案: