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的高度，页脚也会移动。

但我认为改变的正确方法是：200% + 150px

是否有另一种方法将内容div放在内容div之后？

Answer 1

而不是percentage heights（过于复杂和棘手），使用简单，稳定和可靠的viewport percentage units：

＆＃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;

jsFiddle

Answer 2

请尝试：

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

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

2 个答案:

jsFiddle