Question

我知道有很多关于这方面的问题，但我现在已经在谷歌搜索了4天，似乎没有什么对我有用。我试图实现粘性页脚 - 这意味着当没有足够的内容填充屏幕时，页脚位于屏幕的底部，当有足够的内容填满屏幕时，页脚会保持在屏幕下方内容，然后向下滚动。

我已经尝试了大约15种不同的粘性页脚解决方案，虽然它们大部分都在理论上工作，但我的特殊情况一直在弄乱它我的内容左右边界应该延伸到页脚。任何涉及推动的事情都无法奏效。

以下是我尝试过的最新版本：

HTML

<div id="container">

  <div id="header">
    <!--Banner goes here-->
    <div id="nav">Navigation Links</div>
  </div>

  <div id="content">
    <p>Content Goes Here</p>
  </div>

  <div id="footer">
  </div>

</div>

CSS

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

#container {
  min-height: 100%;
  position: relative;
}

#content {
  padding: 20px;
  border-left: solid 30px lightblue;
  border-right: solid 30px lightblue;
}


#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  border-top: solid;
  text-align: center;
  padding-top: 10px;

}

如何让这个粘性页脚工作，同时让这些蓝色边框延伸到页脚？

Answer 1

body{
  padding-bottom: 90px
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right:0 ;
  height: 80px;
  border-top: solid;
  text-align: center;
  padding-top: 10px;
}

Answer 2

这是一个使用box-shadow创建＆＃34; border的解决方案：＆＃34; http://jsfiddle.net/FT8KR/。像素值相当随意，所以玩这些。也可以使用边框，但它会向内推动滚动条，而框阴影自然不会。

#container {
    height: 100%;
    margin: 0 auto -80px;
    overflow: auto;
    padding-bottom: 80px;
    padding: 0 30px;
    box-shadow: inset -48px 0 0 lightblue,
                inset 30px 0 0 lightblue;
}

CSS粘滞页脚 - 使内容边框延伸到页脚

2 个答案: