CSS粘性页脚边距
我不想要固定页脚，我需要粘性页脚。 我的粘性页脚一开始工作得很好，但当内容达到一定高度时，页脚和页面底部之间有一个边距 尝试处理浏览器高度和内容div高度，您应该会发现问题所在 它在页脚和页面底部之间留下了一个尴尬的空白 先谢谢你 CSS代码：CSS粘性页脚边距,css,footer,sticky,Css,Footer,Sticky,我不想要固定页脚，我需要粘性页脚。 我的粘性页脚一开始工作得很好，但当内容达到一定高度时，页脚和页面底部之间有一个边距 尝试处理浏览器高度和内容div高度，您应该会发现问题所在 它在页脚和页面底部之间留下了一个尴尬的空白 先谢谢你 CSS代码： html, body { height:100%; margin:0; } body { color:#FFF; font:16px Tahoma, sans-serif; text-align:center; }
html, body {
height:100%;
margin:0;
}
body {
color:#FFF;
font:16px Tahoma, sans-serif;
text-align:center;
}
a {
text-decoration:none;
}
#wrapper {
height:100%;
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
}
#content {
background:#F00;
height:950px;
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
}
#footer span {
color:#FFF;
font-size:16px;
padding-right:10px;
}
#push {
clear:both;
height:30px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Bad Footer</title>
<link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<a href=""><span>About Us</span></a>
<span> | </span>
<a href=""><span>Contact Us</span></a>
<span> | </span>
<a href=""><span>Home</span></a>
</div>
</body>
html, body {
height:100%;
margin:0;
}
body {
color:#FFF;
font:16px Tahoma, sans-serif;
text-align:center;
}
a {
text-decoration:none;
}
#wrapper {
height:100%;
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
}
#content {
background:#F00;
height:950px;
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
}
#footer span {
color:#FFF;
font-size:16px;
padding-right:10px;
}
#push {
clear:both;
height:30px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Bad Footer</title>
<link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<a href=""><span>About Us</span></a>
<span> | </span>
<a href=""><span>Contact Us</span></a>
<span> | </span>
<a href=""><span>Home</span></a>
</div>
</body>
坏脚
当您向下滚动时，页脚会在底部留下额外的空间。它从底部开始，仅用于“折叠上方”部分（在滚动之前，它位于底部）。
|
|
只需添加
位置：固定到css中的footer
类：
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed; /*add this new property*/
}
-----更新-----
如果您需要保持底部的页脚，则需要两件事：
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: relative; /*use relative position*/
}
#包装器{
/*高度：100%；*//*您需要对此高度进行注释*/
保证金：0自动；
最小高度：100%；
最小高度：700px；/*仅用于演示目的*/
垫底：-30px；
宽度：985px；
position:relative；/*您需要添加这个*/
}
#页脚{
背景：#000；
边框顶部：1px实心#00F0FF；
高度：30px；
利润上限：-30px；
填充：5px0；
宽度：100%；
位置：相对；/*使用相对位置*/
}
当您向下滚动时，页脚会在底部留下额外的空间。它从底部开始，仅用于“折叠上方”部分（在滚动之前，它位于底部）。
|
|
将位置：固定添加到页脚类。请注意，它在某些旧版本的Internet Explorer中不起作用
查看如何使其在IE中也起作用的示例多年来，我一直有相同的问题，但似乎没有任何效果，然后我意识到，我在页脚下看到的空白实际上根本不是空白，而是在白色背景上有白色文本的页脚溢出。我所要做的就是补充：
overflow:hidden
到我的css中的页脚
如果有人想要适合我的解决方案，那么它与添加了溢出的解决方案相同：hiddenDISPLAY TABLE=NO JS和NO fixed height
适用于现代浏览器（IE 8+）-我在几个浏览器中进行了测试，结果都很好
我发现了这个解决方案，因为我需要一个没有固定高度和JS的粘性页脚。代码如下
说明：基本上您有一个容器div，它有两个子元素：包装器和页脚。把你需要的所有东西都放在包装器的页面上（除了页脚）。容器设置为display:table包装设置为显示：表行
如果将html、正文和包装设置为高度：100%
，则页脚将粘在底部
页脚设置为display:table也是。这是必要的，以获得子元素的边距。您还可以将页脚设置为display:table row这将不允许您在页脚上设置页边距顶部
。在这种情况下，您需要对更多嵌套元素进行创新
解决方案：
内容更多：
/*这就是魔法*/
html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
html，
身体{
保证金：0；
填充：0；
}
html，
身体，
#集装箱，
#包装纸{
身高：100%；
}
#集装箱，
#包装纸，
#页脚{
宽度：100%；
}
#集装箱，
#页脚{
显示：表格；
}
#包装纸{
显示：表格行；
}
/*这只是装饰风格*/
html{
字体系列：无衬线；
}
#标题，
#页脚{
文本对齐：居中；
背景：黑色；
颜色：白色；
}
#标题{
填充：1em；
}
#内容{
背景：橙色；
填充：1em；
}
#页脚{
页边距顶部：1em；/*仅当页脚有display:table*/
}
标题
内容
更多内容
更多内容
页脚
更多页脚
将位置设置为“固定”不是粘性页脚。。。固定意味着它将始终保持在底部（尽管滚动）。另一方面，粘性页脚要复杂得多。如果有滚动，则必须滚动底部才能看到页脚，否则页脚将停留在底部。JSFiddle链接已断开。@Reado代码片段现在已添加到答案中。关键字：粘性页脚。将“位置”设置为“固定”不是粘性页脚。。。固定意味着它将始终保持在底部（尽管滚动）。另一方面，粘性页脚要复杂得多。如果有滚动，您将不得不滚动底部以查看页脚，否则它将停留在底部。