滚动时无法查看我的内容，因为粘性页脚隐藏了内容。我想始终使用边距顶部或填充顶部设置页脚，以便能够看到内容。如何将边距顶部或填充顶部设置为粘性页脚？如果我添加粘性页脚，我需要在内容和粘性页脚之间留出一些空间。
http://jsfiddle.net/a6c8rf4y/1/
#footer
{
bottom:0px;
width:100%;
height:50px;
position:fixed;
height: 50px;
line-height: 50px;
background-color: #C97;
}
通过添加
.content {
margin-bottom: 50px;
}
到您的 CSS，您的内容在底部留下足够的空间，以便在用户一直向下滚动时适合您的粘性页脚。
您可以使用
class "gap-bottom"设置新div，并在完成之前将其设置在底部<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 -->