1-
min-height: 100vh;height: 100vh;height: 100%;margin: 0;2-但我建议使用 flex。您将更多地使用它并且更好地学习它。 我建议阅读这篇文章，它解释了使用 flex 解决您的确切问题的方法：文章
以下是我将如何使用 flex 解决您的问题：
<!DOCTYPE html>
<html>
<head>
<style>
html, body{
height: 100%;
margin: 0;
}
.wrapper{
display: flex;
flex-flow: column;
height: 100%;
}
.wrapper .header{
flex: 0 1 auto;
background: #7e8aa0;
}
.wrapper .content{
flex: 1 1 auto;
background: #dbdfe7;
}
.wrapper .footer {
flex: 0 1 100px;
background: #7e8aa0;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
ХЕДЕР
</div>
</header>
<div class="content">
<div class="container">
<section class="первая секция контента">
ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
</section>
</div>
</div>
<footer class="footer">
<div class="container">
ФУТЕР
</div>
</footer>
</div>
</body>
</html>我发现问题是你在包装器上使用了“min-height: 100vh”，这给了它一个未定义的高度，因为它可以无限高于那个。
尝试使用“height：100vh”而不是对我有用。
但我不推荐这种方法，因为它会溢出到包装器之外，因为“内容”将与包装器本身具有相同的高度，而不考虑也在包装器中的页眉和页脚，这将导致页眉和页脚溢出，因为没有空间留给他们。
所以我认为你最好的选择是坚持使用 flex box 因为它是为这种东西而制作的。