Question

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

所以结构就像：

2016-07-15 20:30:00

和CSS一样：

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

然而，这并没有产生这种效果。请帮助和抱歉我的英语。

Answer 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 */
}

Answer 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

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

2 个答案: