html - 粘性页脚弄乱了部分的高度

Question

我正在尝试在具有固定高度的部分的网页中创建粘性页脚。当我尝试这个 trick ，我得到了粘性页脚，但这些部分没有显示它们的固定高度。我该如何解决？

Ps:当我将 min-height 更改为 height 时，它解决了部分高度的问题，但我没有看到粘性页脚。

html,body {
width:100%;
height:100%;
position:relative;
}

.wrapper {
position:relative;
width:100%;
min-height:100%;
margin-bottom:200px;
}

.section1{
width:100%;
height:100%;
background-color:grey;
}

.section2{
width:100%;
height:50%;
background-color:orange;
}

.wrapper:after {
  content: "";
  display: block;
}
.site-footer, .wrapper:after {
height:200px ;
}

.site-footer {
    background-color:red ;
}

<main class="wrapper">
<section class="section1">
<h2>header1</h2>
</section>
<section class="section2"><h2>header2</h2></section>
</main>
<footer class="site-footer">
<p>footer</p>
</footer>

Answer 1

您可以为部分使用“vh”值而不是百分比值(1vh = 视口(viewport)高度的 1%):

html,body {
width:100%;
height:100%;
position:relative;
}

.wrapper {
position:relative;
width:100%;
min-height:100%;
margin-bottom:200px;
}

.section1{
width:100%;
height:100vh;
background-color:grey;
}

.section2{
width:100%;
height:50vh;
background-color:orange;
}

.wrapper:after {
  content: "";
  display: block;
}
.site-footer, .wrapper:after {
height:200px ;
}

.site-footer {
    background-color:red ;
}

<main class="wrapper">
<section class="section1">
<h2>header1</h2>
</section>
<section class="section2"><h2>header2</h2></section>
</main>
<footer class="site-footer">
<p>footer</p>
</footer>