我在这里有这段代码:http://jsfiddle.net/52yekaL9/
html, body {
height: 100%;
}
.content {
height: 100%;
}
.part {
height: 100%;
width: 100%;
}
.a { background-color: red; }
.b { background-color: green; }
.c { background-color: blue; }
.d { background-color: orange; }
<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>
<div class="footer d">
this footer
</div>
问题出在我的div.footer d
。我看到它是这种形式:div.part b
。我正在测试,我看是否更改.content
的高度,页脚也会移动。
但我认为改变的正确方法是:200% + 150px
是否有另一种方法将内容div放在内容div之后?
答案 0 :(得分:2)
而不是percentage heights(过于复杂和棘手),使用简单,稳定和可靠的viewport percentage units:
.content {
min-height: 100vh;
}
.part {
height: 100vh;
}
.a { background-color: red; }
.b { background-color: green; }
.c { background-color: blue; }
.d { background-color: orange; }
&#13;
<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>
<div class="footer d">this footer</div>
&#13;
答案 1 :(得分:0)
请尝试:
<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>