CSS 粘性页脚的问题答案

【问题标题】：Problems with CSS sticky footerCSS 粘性页脚的问题
【发布时间】：2011-04-23 19:02:19
【问题描述】：

我正在尝试实现 CSS 粘性页脚。

问题是有一个内容 DIV 超出了其容器，导致滚动条不理想，并且挂在页面 div 上的背景图像没有延伸到文档的整个高度。

这是我的 HTML：

    <div id="page">
          <div id="header">
            <dl>
                <dt>Header links -</dt>
                <dd><a href="#">link 1</a></dd>
                <dd><a href="#">link 2</a></dd>
                <dd><a href="#">link 3</a></dd>
            </dl>
          </div>
        <div id="content">
            <p><a id="modal" href="popup.html" target="_blank">link to popup</a></p>
        </div>      
        <div id="footer">
            <dl>
                <dt>Footer links -</dt>
                <dd><a href="#">link 1</a></dd>
                <dd><a href="#">link 2</a></dd>
                <dd><a href="#">link 3</a></dd>
            </dl>
        </div>
    </div>

这是 CSS：

/*--------------------------------------------------------------- global */

html, 
body {
    color:#969696;
    font-size:100%;
    height:100%;
}

body {
    font:normal 200 70% Arial, Helvetica, Verdana, sans-serif;  
}

a, 
a:link, 
a:visited, 
a:hover, 
a:active {
    border-bottom:1px dashed #ff8400;
    color:#ff8400;
    text-decoration:none;}

a:hover {
    border-bottom-style:solid;}

/*--------------------------------------------------------------- layout */

#page {
    background:url("../images/bgMain.jpg") repeat-y center top;     
    height:100%;
    margin:0 auto;
    position:relative;
    width:1024px;
}

dl, 
dt, 
dd {
    float:left;
} 


dd {
    margin:0 .2em 0;
}

dd:after {
    color:#969696;
    content:"|";
    padding:0 0 0 .3em;
}

dd:last-child:after {
    content:"";
}

/*----------------- header */

#header {
    margin:0 auto;
    width:726px;
}

#header dl {
    float:right;
    line-height:60px;
}

/*----------------- content body */

#content {
    background:#fff;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
        -moz-border-radius-topleft:5px;
        -moz-border-radius-topright:5px;
        -webkit-border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;
    box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);    
        -moz-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
        -webkit-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
    clear:both;
    height:100%;
    margin:0 auto;  
    min-height:100%;
    padding:16px 13px 22px;
    position:relative;
    width:700px;
}

/*----------------- footer */

#footer {
    clear:both;
    margin:-22px auto;
    position:relative;
    width:726px;
}

#footer dl {
    display:inline; 
    margin:0 0 0 13px;
}

#footer a, 
#footer a:link, 
#footer a:visited, 
#footer a:hover, 
#footer a:active {
    border-bottom-color:#969696;
    color:#969696;
}

【问题讨论】：

标签： html css xhtml

【解决方案1】：

奇妙的CSS Tricks 网站在其Snippets 区域中有一个用于粘性页脚的sn-p

http://css-tricks.com/snippets/css/sticky-footer/

或使用 jQuery

http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

最新的演示链接

【讨论】：

另见Sticky Footer, Five Ways。

【解决方案2】：

来自James Dean的现代简洁CSS“粘滞页脚”

HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Demo here

【讨论】：

【解决方案3】：

显然，您需要更改#footer 的规则以包含定义的高度，然后是负边距顶部规则，其值等于您定义的高度。

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

【讨论】：

【解决方案4】：

几天前我写了一个非常干净的 CSS 页脚，你会发现它很有用。

http://mystrd.at/modern-clean-css-sticky-footer

【讨论】：

【解决方案5】：

您会在这个 github 存储库 (Bredele css sticky footer) 上找到两个版本的粘性页脚：一个带有页眉，另一个没有。

这两个版本都使用 display:table（适用于 IE8），没有额外的标记、没有 clearfix 和灵活的内容高度。此外，标题高度不依赖于内容填充或相对视口！

希望对您有所帮助！

奥利维尔

【讨论】：

【解决方案6】：

通过使用摆脱滚动条

overflow: hidden

在它们出现的容器上。

【讨论】：

对不起，我应该澄清滚动条在浏览器上是由扩展页面的内容 div 引起的。实际元素上没有滚动条。
html，正文 { 溢出：隐藏； }
使页脚消失 :(
好吧，你为什么不将你的页脚绝对定位在底部：0px？

【解决方案7】：

对页脚使用以下样式：

#footer{position:absolute;bottom:0}

这会一直放在屏幕底部，如果你想在<div id="page">底部添加

#page{position:relative}

【讨论】：

【解决方案8】：

如果您不知道页脚的高度，例如响应式布局，该怎么办？是使用 JavaScript 和 window.onresize 的唯一选择吗？

【讨论】：

【解决方案9】：

你可以使用这种风格：

html {
    height: 100%;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0 0 8rem 0;
    min-height: 100%;
    position: relative;
}

.myFooter {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    padding: 0 8rem;
}

【讨论】：

【解决方案10】：

有一个非常有用的 CSS 技巧，即使内容高度低于视口的高度，也会始终将页脚固定在底部。

参见下面的 HTML 代码：

<!DOCTYPE html>
<html>
 <head>
  <title>Sticky Footer</title>
 </head>
 <body>
  <div class="content">&nbsp;</div>
  <footer>&copy; 2016</footer>
 </body>
</html>

参见下面的 CSS 代码：

body {
 margin: 0; /* If not already reset */
}

.content {
 min-height: calc(100vh - 20px);
}

footer {
 height: 20px;
}

在您的情况下，我会将导航和文章包装在“内容”div 中。并给它一个 calc(100vh - 100px) 的最小高度值。

这里是文章来源：Sticky CSS Footer

【讨论】：

【解决方案11】：

使用弹性盒子

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

这样，我解决了页脚内容不完整的所有问题。

【讨论】：

【解决方案12】：

世事难料！你只需要坚持到底...

使用下面的代码：

//This is jus't a stupid detail
//So, don't take much importance!

const text = document.getElementById('footer');

text.onmouseover = function(){
  text.style.color = "red";
}

text.onmouseleave = function(){
  text.style.color = "white";
}

while (e = true){
  text.innerText = "Hello!";
  setTimeout(function(){
   text.innerText = "I love coding";
   setTimeout(function(){
    text.innerText = "Codede by INovomiast";
   }, 1500);
  },1500);
}

footer{
  background-color: rgb(0,0,0,0.5);
  width: 100%;
  color: white;
  bottom: 0;
  position: absolute;
}

<html>
  <body>
    <h1>PAGE CONTENT</h1>
    <footer>
      <center>
        <h1 id='footer'>FOOTER!</h1>
      </center>
    </footer>
  </body>

</html>

【讨论】：