粘性页脚会弄乱部分的高度

Question

我试图在网页中创建一个粘性页脚，其中包含固定高度的部分。当我尝试这个trick时，我得到了粘性页脚，但这些部分没有显示出固定的高度。我该如何解决？

Ps：当我将最小高度改为高度时，它修复了部分高度的问题，但我没有粘性页脚。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用“vh”值代替百分比值（1vh =视口高度的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>