滚动时无法查看我的内容，因为页脚粘住了内容。我想始终将页脚设置为边距顶部或填充顶部，以便能够看到内容。如何设置页眉顶部或填充页脚为粘性页脚？如果我添加了stickyfooter，我需要在内容和stickyfooter之间留一些空间。
http://jsfiddle.net/a6c8rf4y/1/
#footer
{
bottom:0px;
width:100%;
height:50px;
position:fixed;
height: 50px;
line-height: 50px;
background-color: #C97;
}
答案 0 :(得分：1)
通过添加
.content {
margin-bottom: 50px;
}
在CSS上，您的内容在底部留有足够的空间，以便当用户向下滚动时，您的粘页脚可放入其中。
答案 1 :(得分：0)
您可以使用div class设置新的"gap-bottom"，并在<div class="content"></div>完成之前将其设置在底部。
这是工作示例。
*
{
margin: 0px;
padding: 0px;
}
html, body
{
height: 100%;
}
body
{
background-color: #bbb;
}
#wrapper
{
min-height: 99%;
height: inherit;
width: 950px;
margin-left: auto;
margin-right: auto;
}
#header
{
background-color: #C97;
line-height: auto;
text-align: center;
font-family: "Lucida Console";
font-weight: bold;
font-size: 2.5em;
}
#main-section
{
background-color: #ddd;
bottom: 50px;
top:47px;
width:100%;
}
#footer
{
bottom:0px;
width:100%;
height:50px;
position:fixed; // this is the key
height: 50px;
line-height: 50px;
background-color: #C97;
}
#footer_inner{
text-align:center;
}
.gap-bottom{
margin-bottom: 50px;
}<div id="wrap">
<div id="header">
header...
</div> <!-- end of header -->
<div id="main-section">
<div class="content">
<div class="gap"></div>
<p>First line...............</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>Long content goes here...</p>
<p>586 Long content goes here...</p>
<p>893 Long content goes here...</p>
<p>568 Long content goes here...</p>
<p>123 Long content goes here...</p>
<p>123 Long content goes here...</p>
<p>Last line................</p>
<div class="gap gap-bottom"></div>
</div>
</div> <!-- end of main section -->
</div> <!-- end of wrapper -->
<div id="footer">
<div id="footer_inner">footer...</div>
</div> <!-- end of footer -->