CSS Sticky Footer Margin

我不想要一个固定页脚，我需要一个STICKY页脚。CSS Sticky Footer Margin

我的粘性页脚首先运行良好，但当内容处于特定高度时，页脚和页面底部之间存在空白。

尝试搞乱浏览器高度和内容div高度，你应该看到问题出在哪里。

它在页脚和页面底部之间留下了一个尴尬的边缘。

预先感谢您。

CSS代码：

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; 
}

HTML代码：

<!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>

来源

2012-08-08 Connor

就在你的CSS添加position: fixed;您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*/ 
}

----- UPDATE -----

如果您需要停留在底部页脚需要两样东西：

#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*/ 
}

#wrapper { 
 
    /*height:100%;*/ /*you need to comment this height*/ 
 
    margin: 0 auto; 
 
    min-height: 100%; 
 
    min-height: 700px; /* only for Demo purposes */ 
 
    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*/ 
 
}

<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>

来源

2012-08-08 15:47:46 Luis

设置位置固定不粘性页脚...固定意味着它会始终保持底部（尽管滚动）。另一方面，粘脚是非常复杂的。如果正在滚动，则必须滚动底部才能看到页脚，否则会停留在底部。 – Connor 2012-08-08 16:00:37

@Connor检查答案中的更新 – Luis 2012-08-08 16:29:29

这似乎有窍门！谢谢一堆。 – Connor 2012-08-08 18:10:55

将position: fixed添加到页脚类。请注意，它在某些旧版本的Internet Explorer中不起作用。 http://jsfiddle.net/kAQyK/

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
}

见http://tagsoup.com/cookbook/css/fixed/为例子，说明如何使它在IE

来源

2012-08-08 15:48:32 Samuel

关键词：粘性踏步机。将位置设置为固定不是一个粘滞的页脚...固定意味着它将始终保持在底部（尽管滚动）。另一方面，粘脚是非常复杂的。如果正在滚动，则必须滚动底部才能看到页脚，否则会停留在底部。 – Connor 2012-08-08 16:01:25

我有对年龄并没有什么相同的问题也工作似乎再工作，我意识到，我是我的页脚下看到的空白是实际上并没有空白，只是白色背景上白色文字的页脚溢出。我所要做的只是补充：

overflow:hidden

我的CSS在我的页脚。

如果有人想为我工作的解决方案则是一样的http://getbootstrap.com/2.3.2/examples/sticky-footer.html但有一个额外溢出：隐藏

来源

2014-07-07 01:34:19 Dominic

显示表= NO JS并没有固定的高度！

在现代浏览器（IE 8 +）中工作 - 我在多个浏览器中测试过，它似乎都工作正常。

我发现了这个解决方案，因为我需要一个没有固定高度且没有JS的粘性页脚。代码如下。

说明：基本上你有一个容器div与2个子元素：一个包装和一个页脚。将所有需要的东西放在页面上（将页脚除外）放入包装中。容器设置为display: table;包装设置为display: table-row;如果将html，正文和包装设置为height: 100%，则页脚将粘到底部。

页脚也设置为display: table;。这是必要的，以获得子元素的边缘。您还可以将页脚设置为display: table-row;这不允许您在页脚上设置margin-top。在这种情况下，您需要创造更多嵌套元素。

解决办法：https://jsfiddle.net/0pzy0Ld1/15/

并与更多的内容：http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body, 
 
#container, 
 
#wrapper { 
 
    height: 100%; 
 
} 
 
#container, 
 
#wrapper, 
 
#footer { 
 
    width: 100%; 
 
} 
 
#container, 
 
#footer { 
 
    display: table; 
 
} 
 
#wrapper { 
 
    display: table-row; 
 
} 
 
/* THIS IS JUST DECORATIVE STYLING */ 
 

 
html { 
 
    font-family: sans-serif; 
 
} 
 
#header, 
 
#footer { 
 
    text-align: center; 
 
    background: black; 
 
    color: white; 
 
} 
 
#header { 
 
    padding: 1em; 
 
} 
 
#content { 
 
    background: orange; 
 
    padding: 1em; 
 
} 
 
#footer { 
 
    margin-top: 1em; /* only possible if footer has display: table !*/ 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 
     HEADER 
 
    </div> 
 
    <div id="content"> 
 
     CONTENT 
 
     <br> 
 
     <br>some more content 
 
     <br> 
 
     <br>even more content 
 
    </div> 
 
    </div> 
 
    <div id="footer"> 
 
    <p> 
 
     FOOTER 
 
    </p> 
 
    <br> 
 
    <br> 
 
    <p> 
 
     MORE FOOTER 
 
    </p> 
 
    </div> 
 
</div>

来源

2016-02-08 16:55:38

CSS Sticky Footer Margin

回答

相关问题