滚动时我无法查看我的内容，因为粘性页脚隐藏了内容。我想始终将页脚设置为边缘顶部或填充顶部以能够看到内容。如何将页边距顶部或填充顶部设置为粘性页脚？如果我添加stickyfooter，我需要在内容和stickyfooter 之间留一些空间。
http://jsfiddle.net/a6c8rf4y/1/
#footer
{
bottom:0px;
width:100%;
height:50px;
position:fixed;
height: 50px;
line-height: 50px;
background-color: #C97;
}
【问题讨论】：
标签： css
通过添加
.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 -->【讨论】：