与 CSS Sticky Footer 相反答案

【问题标题】：Doing the opposite of CSS Sticky Footer与 CSS Sticky Footer 相反
【发布时间】：2011-05-28 03:41:45
【问题描述】：

我正在尝试做 StickyFooter 的相反情况：页脚应该始终可见（它将与内容重叠），但当浏览器高度超过内容时（内容将是固定高度），应该坚持页面内容。

基本上，我希望它的行为类似于 position:fixed 仅当浏览器高度小于内容时。

我已经通过 CSS 进行了尝试，类似于 stickyfooter 的方式（使用 max-height 而不是 min-height），但是......

我的问题：当浏览器小于内容时，页脚最初会粘在底部，但是当您滚动时它不会一直粘在底部。 As shown here

我猜会涉及到一些 javascript 来让它保持在底部，但我还没有找到一个脚本来做到这一点（而且我自己也不知道如何编写一个......）

任何帮助、建议、链接将不胜感激！谢谢。

HTML, BODY { height: 100%; 
   font-family: helvetica, arial; 
   font-size: 8pt;
   }
#wrapper {
   margin: 0 auto;
   width: 800px;
   position:relative;
   height:100%;
   max-height: 516px;
   }
#content {
   width:800px;
   height:400px;
   position: absolute;
   background: #999;
   border: 4px solid #000;
   }
#footer {
   height: 100px;
   position: absolute;
   bottom: 0;
   width: 800px;
   background-color: yellow;
   border: 4px solid #f90;
   }

【问题讨论】：

标签： css scroll footer absolute sticky

【解决方案1】：

通过申请解决

footer{
 position: sticky;
 bottom:0;
}

页脚标签，仅此一项就解决了我的问题。

【讨论】：

【解决方案2】：

当页脚定位为固定时，您应该将margin-bottom: 100px 或更多添加到body 类（这是页脚的高度）。

【讨论】：