带有透明背景的粘滞页脚

Posted 2023-03-21

【中文标题】带有透明背景的粘滞页脚

【英文标题】：Sticky footer with transparent background

【发布时间】：2014-06-01 01:09:00

【问题描述】：

是否可以实现透明背景下没有内容背景（.wrapper）的sticky footer？

我正在使用 -> http://ryanfait.com/sticky-footer/layout.css

【参考方案1】：

这是简单的 CSS 技巧：

#footer 
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;

Position: fixed 实际上告诉内容在滚动时不能移动。 当位置固定后，我们需要给出准确的位置，由bottom: 0完成。

JSFiddle

但是内容会在它下面并以透明背景可见。使内容在其下不可见的一种方法是将内容包装在位置固定的包装器中，顶部、左侧、右侧：0 和底部：'页脚高度'