我想像在这个网站上一样创建页脚效果。我想我的内容需要一个包装器,然后添加页脚。
所以结构是这样的:
<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 中的页脚效果