html - CSS Sticky Footer - 获取内容边框以扩展到页脚

Question

我知道有很多关于此的问题，但我已经在 Google 上搜索了 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

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

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