css - 与 CSS Sticky Footer 相反

Question

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

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

我已经通过 CSS 尝试过它，类似于 stickyfooter 的方式(使用最大高度而不是最小高度)，但是......

我的问题:当浏览器小于内容时，页脚最初会粘在底部，但在您滚动时它不会一直粘在底部。 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;
   }

Answer 1

通过应用解决

footer{
 position: sticky;
 bottom:0;
}

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