我有部分在标题上方滑动。
但我需要最后一部分来显示页脚。
在这种情况下,可以不使用 JavaScript 来显示页脚吗?
html,
body,
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
margin-top: 300px;
margin-bottom: 300px;
}
.header {
height: 100vh;
background: tomato;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.section1,
.section2,
.section3 {
height: 100vh;
z-index: 10;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
height: 10vh;
position: fixed;
bottom: 0;
width: 100%;
background: aquamarine;
}
<div class="container">
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
</div>
<div class="footer">
footer
</div>
最佳答案
您的页脚未显示的原因是它的 z-index 低于其他部分。但是,如果您为您的 .footer
类提供比其他部分更高的 z-index,它将始终显示在底部,因为它具有 position: fixed
样式。
一个可能的解决方案是为页脚提供与其他部分相同的 z-index,将其位置更改为 relative
,并将其包含在 .container
类中.
这看起来像:
html,
body,
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
margin-top: 300px;
margin-bottom: 300px;
}
.header {
height: 100vh;
background: tomato;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.section1,
.section2,
.section3,
.footer {
height: 100vh;
z-index: 10;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
height: 10vh;
position: relative;
bottom: 0;
width: 100%;
background: aquamarine;
}
<div class="container">
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
<div class="footer">
footer
</div>
</div>
关于html - 粘性页脚显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55168615/