做与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：仅在浏览器高度小于内容高度时固定。

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

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

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

I

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

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

推荐答案

反向粘性踏板？

我所做的只是分析了OP提供的站点，然后我想出了一个jsFiddle来演示实现此目标所需的绝对最低限度的html / css。效果：

All I did was analyze the site that OP provided and I came up with a jsFiddle demonstrating the absolute bare-minimum html/css required in order to achieve this effect:

jsFiddle

要注意的重要一点是 body 需要应用最大高度属性对它。请注意，因为这可能取决于其中包含的内容量而有所不同。我将尽快使用js更新示例，以展示如何自动完成此操作。

The important thing to note is that body needs a max-height property applied to it. Be careful because this can vary depending upon how much content it contains. I'll update my example soon with js to show how this can be done automatically.

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