做与 CSS 粘性页脚相反的事情 [英] Doing the opposite of CSS Sticky Footer

问题描述

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

I'm trying to do the reverse situation of StickyFooter: Footer should always be visible (it will overlap content), but should stick to the page content when the browser height exceeds the content (content will be a fixed height).

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

Basically, I want it to behave like position:fixed only when the browser height is smaller than content.

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

I have tried it through just CSS similarly to the way stickyfooter does (using max-height instead of min-height), but...

我的问题:当浏览器小于内容时，页脚最初会粘在底部，但是当您滚动时它不会一直粘在底部.如图所示

My problem: When the browser is smaller than the content, the footer sticks to the bottom initially, but then it doesn't keep sticking to bottom as you scroll. As shown here

我猜会涉及一些 javascript 以使其保持在底部，但我还没有找到执行此操作的脚本(而且我不知道如何自己编写一个...)

I'm guessing there will be some javascript involved to keep it stuck to the bottom, but I haven't found a script that does this (and I don't know how to write one myself...)

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

Any help, suggestions, links would be very appreciated! Thanks.

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

推荐答案

已解决

footer{
 position: sticky;
 bottom:0;
}

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

the Footer tag, that alone solved my problem.

这篇关于做与 CSS 粘性页脚相反的事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！