html - 粘性页脚显示

Question

我有部分在标题上方滑动。
但我需要最后一部分来显示页脚。

在这种情况下，可以不使用 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>

View on JS Bin

Answer 1

您的页脚未显示的原因是它的 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>

JS Bin