如何使页脚具有固定位置答案

【问题标题】：How to make footer have fixed position如何使页脚具有固定位置
【发布时间】：2018-11-05 16:19:24
【问题描述】：

我正在尝试修复页脚，同时仍然在上面的 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

width: 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>

【讨论】：

是的，看起来你已经修好了！它应该看起来像这样的页脚：presse.no 你知道有什么办法可以让页脚在屏幕左侧有更高的高度吗？
好的，谢谢！我会尝试试验，让页脚看起来更像“presse.no”，这样上面的内容会继续滚动，但页脚会保持不变。
是的，我想你可以。也许尝试添加到, * { margin: 0;填充：0； min-height: 200px;（这种做法）}
完全可以，谢谢！我还将尝试找到如何使我的 div 在向左或向右滚动时（在 Mac 上）没有空白，以及在页脚中存储内容的简单方法。您帮了大忙，非常感谢！
不客气！对于页脚，您始终可以设置“高度：60vh；”这将隐藏页脚部分的空白。但是，如果您要将内容添加到页脚，则应该将其放在顶部，并查看需要将其放下多少。因为您的其他 div 将覆盖页脚。希望它有所帮助。祝你好运?