1

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

基本上，我希望它的行为类似于位置：仅当浏览器高度小于内容时才固定。

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

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

我猜会涉及到一些 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;
   }
4

2 回答 2

1

通过申请解决

footer{
 position: sticky;
 bottom:0;
}

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

于 2021-07-28T19:01:37.780 回答
0

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

于 2010-12-20T09:18:31.180 回答