如何将页脚div放在内容之下?

时间:2017-02-18 00:14:16

标签: html css

我在这里有这段代码: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之后?

2 个答案:

答案 0 :(得分:2)

而不是percentage heights(过于复杂和棘手),使用简单,稳定和可靠的viewport percentage units

&#13;
&#13;
.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;
&#13;
&#13;

jsFiddle

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