CSS中的固定页脚效果（如固定图像）答案

【问题标题】：fixed footer effect in CSS (like fixed image)CSS中的固定页脚效果（如固定图像）
【发布时间】：2016-11-17 20:39:13
【问题描述】：

我想像在this 网站上一样创建页脚效果。我想我的内容需要一个包装器，然后添加页脚。

所以结构是这样的：

<div class="content"></div>
<div class="footer">
    <div class="footer-content">
    </div>
</div>

和 CSS 类似：

.footer{
width: 100%;
}

.footer-content{
position: fixed;
bottom: 0;
width: 100%;
z-index: 0;
}
.content{
z-index: 9999 !important;
background-color: #fff;
position: relative;
margin-bottom: 600px; //height of my full footer
}

但是这不会产生这种效果。请帮助并为我的英语感到抱歉。

【问题讨论】：

阿米尔，是对的。此外，您的代码应该可以工作。
Amir 发短信说固定背景图片 - 我想要整个页脚固定效果（带内容）。
很接近了，这里有一个小提琴：jsfiddle.net/jrgaoztp

标签： html css footer fixed

【解决方案1】：

要实现这一点，您需要固定页脚并在其上方滚动内容。

CSS 的一个粗略示例是：

.content {
    position: relative;    /* required for z-index to work */
    z-index: 2;            /* bring above footer */
    margin-bottom: 100px;  /* the height of the footer */
}


.footer {
    position: fixed; /* fix in position */
    z-index: 1;      /* bring below content */
    bottom: 0;       /* anchor to bottom of screen */
    left: 0;         /* go full width */
    width: 100%;     /* go full width */
}

【讨论】：

【解决方案2】：

请检查此代码

HTML

<div class="content">
  <h1>Content</h1>
</div>
<div class="footer">
    <div class="footer-content">
      <h1>Footer</h1>
    </div>
</div>

CSS

.footer{
  width: 100%;
  height: 1px;
  display: block;
}

.footer-content{
  bottom: 0;
  display: block;
  position: fixed;
  width: 100%;
  z-index: 0;
  background: #f1f1f1;
}

.content{
  z-index: 9999 !important;
  background-color: #fff;
  display: block;
  position: relative;
  width: 100%;
  height: 1500px;
  margin-bottom: 600px;
  margin-top: -30px;
}

一个样本 Fixed footer effect in CSS

【讨论】：