CSS 中的固定页脚效果(如固定图像)



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

所以结构是这样的:

<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
}

但是,这不会产生这种效果。请帮助和抱歉我的英语。

要实现此目的,您需要固定页脚并在其上方滚动内容。

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

请检查此代码

.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;
}

一个示例修复了 CSS 中的页脚效果

相关内容

  • 没有找到相关文章

最新更新