如何将页脚 div 放在内容下方？答案

【问题标题】：How to put the footer div below the content?如何将页脚 div 放在内容下方？
【发布时间】：2017-07-07 15:57:27
【问题描述】：

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 之后吗？

【问题讨论】：

标签： html css

【解决方案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

【讨论】：

这在屏幕percert情况下使用视口百分比单位是否更好？
@jtwalters，很抱歉我不明白这个问题。
@Michael_B 我想他是在问，当您将宽度和高度设置为百分比时，使用视口是否更好。
谢谢，@SittingBull。一般来说，当您想要相对于父元素调整元素的大小时，请使用 percentages。您通常需要在父级上定义一个高度才能使其工作（有例外）。
当您能够相对于初始包含块（即视口）调整元素的大小时，请使用视口百分比。由于您尝试将元素设置为 height: 100%，因此使用 height: 100vh 是一种简单易行的替代方法。

【解决方案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>

【讨论】：

您将页脚放在“内容”中，而他不希望在操作内容时操作页脚。