Html 如何将页脚div放在内容下方？

我这里有这个代码：

html，正文{
身高：100%；
}
.内容{
身高：100%；
}
.部分{
身高：100%；
宽度：100%；
}
.a{背景色：红色；}
.b{背景色：绿色；}
.c{背景色：蓝色；}
.d{背景色：橙色；}

1.
2.
3.
这个页脚

而不是（过于复杂和棘手），使用简单、稳定和可靠的：

.content{
最小高度：100vh；
}
.部分{
高度：100vh；
}
.a{背景色：红色；}
.b{背景色：绿色；}
.c{背景色：蓝色；}
.d{背景色：橙色；}

1.
2.
3.
此页脚

请尝试：

<div class="content">
  <div class="part a">1</div>
  <div class="part b" style="height:150px;">2</div>
  <div class="part c">3</div>
  <div class="footer d">
  this footer
</div>
</div>

1.
2.
3.
这个页脚

您正在将页脚放在“内容”中，而他不希望在处理内容时对页脚进行操作。在屏幕percert情况下使用视口百分比单位是否更好？@jtworters，很抱歉，我不明白这个问题。@Michael_B我想他是在问，当你将宽度和高度设置为百分比时，使用viewport是否更好。谢谢，@SittingBull。一般来说，当您要相对于父元素调整元素大小时，请使用百分比。您通常需要在父对象上定义一个高度，以便执行此操作（也有例外）。当您能够调整相对于初始包含块（即视口）的元素大小时，请使用视口百分比。由于您试图将元素设置为

height:100%

，因此使用

height:100vh

是一种简单易行的选择。