Question

我正在尝试修复我的页脚，同时仍在上面的div上使用剪辑路径。我希望页脚在中间div下方向下滚动时更加明显。

我尝试做底部：0，以及各种其他浮动，同时将位置设置为固定。未定义位置或设置为相对位置时，页脚会像往常一样放在页面底部。

Codepen：https://codepen.io/Torsken/pen/OZKWvJ

这是我到目前为止的代码;

<body>
  <div class="background_top">
    <a href="#"></a>
  </div>

  <div class="background_middle_1">
    <a href="#"></a>
  </div>

  <div class="background_middle_2">
    <a href="#"></a>
  </div>

</body>
<footer>
  <div class="footer">
    <a href="#"></a>
  </div>
</footer>

.background_top {
  background-color: #232323;
  height: 70vh;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  z-index: -200;
}

.background_middle_1 {
  background-color: green;
  height: 60vh;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 80% , 100% 80%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  z-index: -220;
  margin-top: -45vh;
}

.background_middle_2 {
  background-color: green;
  height: 80vh;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  z-index: -220;
}

footer {
  margin: 0;
  bottom: 0;
  padding: 0;
  z-index: -230;
}

.footer {
  background-color: blue;
  height: 50vh;
  position: fixed;
}

Answer 1

您没有在页脚类中指定宽度。添加

宽度：100％将解决问题。

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
}

.background_top {
  background-color: #232323;
  height: 70vh;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  z-index: -200;
}

.background_middle_1 {
  background-color: green;
  height: 60vh;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 80% , 100% 80%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  z-index: -220;
  margin-top: -45vh;
}

.background_middle_2 {
  background-color: green;
  height: 80vh;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  z-index: -220;
}

.footer {
  margin: 0;
  bottom: 0;
  padding: 0;
  z-index: -230;
  width: 100%; /* your code over here*/
  background-color: blue;
  height: 50vh;
  position: fixed;
}

<body>

  <div class="background_top">
    <a href="#"></a>
  </div>

  <div class="background_middle_1">
    <a href="#"></a>
  </div>

  <div class="background_middle_2">
    <a href="#"></a>
  </div>

</body>

<footer>

  <div class="footer">
    <a href="#"></a>
  </div>

</footer>

如何使页脚有固定的位置

1 个答案: