我将页眉和页脚设置为Position：Fixed。但如果是可滚动的内容，则文本将转到页眉/页脚区域：下面是我的完整代码:http://jsfidle.net/kaqz1km2/6/
在这种情况下，我不想使用background-image或background-color。
下面是CSS：
null
html, body { height:100%; }
header { position:fixed; width:100%; top:0; margin-top:1rem; }
footer { position:fixed; width:100%; bottom:0; line-height:3rem; }null
您可以在#content中使用padding
还要为页眉和页脚提供背景色
查看这里的演示
#content { padding: 60px 0 }
使用以下选项更改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>
