html - 如何将页脚 div 放在内容下方？

Question

我这里有这个代码: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 的 height，页脚也会移动。

但我不认为正确的更改方式是:200% + 150px

还有其他方法可以将页脚 div 放在内容 div 之后吗？

Answer 1

而不是 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; }

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

jsFiddle