我试图固定我的页脚，同时仍在上面的div上使用clip-path。我希望页脚在中间div下方向下滚动时变得更明显。
我尝试将bottom：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;
}
您没有在页脚类中指定宽度。通过添加
宽度：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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句