Html 如何使页脚具有固定位置_Html_Css

Html 如何使页脚具有固定位置

html css

Html 如何使页脚具有固定位置,html,css,Html,Css,我试图使我的页脚固定，而仍然使用剪辑路径上的divs以上。我希望页脚越向下滚动，中间div下面的页脚越明显我尝试过在位置设置为固定时进行底部：0和其他各种浮动。未定义位置或未将其设置为“相对”时，页脚会像往常一样放置在页面底部代码笔：这是我到目前为止的代码 <body> <div class="background_top"> <a href="#"></a> </div> <div class="ba

我试图使我的页脚固定，而仍然使用剪辑路径上的divs以上。我希望页脚越向下滚动，中间div下面的页脚越明显

我尝试过在位置设置为固定时进行底部：0和其他各种浮动。未定义位置或未将其设置为“相对”时，页脚会像往常一样放置在页面底部

代码笔：

这是我到目前为止的代码

<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;
}


.background_top{
背景色：#232323；
高度：70vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,100%0,100%40,0,100%）；
剪辑路径：多边形（0,100%0,100%96,0,100%）；
z指数：-200；
}
.background_middle_1{
背景颜色：绿色；
高度：60vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,80%，100%80%，0,100%）；
剪辑路径：多边形（0,100%0,100%96,0,100%）；
z指数：-220；
利润上限：-45vh；
}
.background_middle_2{
背景颜色：绿色；
高度：80vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,100%0,100%100,0,70%）；
剪辑路径：多边形（0,100%0,100%96,0,100%）；
z指数：-220；
}
页脚{
保证金：0；
底部：0；
填充：0；
z指数：-230；
}
.页脚{
背景颜色：蓝色；
高度：50vh；
位置：固定；
}

您没有在footer类内部指定宽度。加入

宽度：100%将解决此问题

@charset“UTF-8”；
* {
保证金：0；
填充：0；
}
.background_top{
背景色：#232323；
高度：70vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,100%0,100%40,0,100%）；
剪辑路径：多边形（0,100%0,100%96,0,100%）；
z指数：-200；
}
.background_middle_1{
背景颜色：绿色；
高度：60vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,80%，100%80%，0,100%）；
剪辑路径：多边形（0,100%0,100%96,0,100%）；
z指数：-220；
利润上限：-45vh；
}
.background_middle_2{
背景颜色：绿色；
高度：80vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,100%0,100%100,0,70%）；
剪辑路径：多边形（0,100%0,100%96,0,100%）；
z指数：-220；
}
.页脚{
保证金：0；
底部：0；
填充：0；
z指数：-230；
宽度：100%；/*您的代码在这里*/
背景颜色：蓝色；
高度：50vh；
位置：固定；
}

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