Question

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

基本上，我希望它表现得像位置：仅当浏览器高度小于内容时才修复。

我已经通过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;
   }

Answer 1

通过申请解决

footer{
 position: sticky;
 bottom:0;
}

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

Answer 2

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

Answer 3

反向粘贴页脚？见到了。

我所做的就是分析OP提供的网站，我想出了一个jsFiddle，展示了为达到这个效果所需的绝对最低html / css：

jsFiddle

需要注意的重要一点是，body需要应用max-height属性。请注意，因为它可能会有所不同，具体取决于它包含的内容。我将很快用js更新我的例子，以展示如何自动完成。

与CSS Sticky Footer相反

3 个答案: