将div垂直扩展到可用空间

Question

我有一个简单的页面与3 div相互叠加但我不能让中间内容div使用屏幕上可用的所有垂直空间.请注意,顶部和底部高度无法修复,并且必须与IE9兼容.

HTML

<div class="container">
    <div>Top</div>
    <div class="content">Middle</div>
    <div>Bottom</div>
</div>

CSS

.container {
    background-color: #dddddd;
}
.content {
    height: 100%;
    min-height: 100%;
}

我还把它放在Fiddle上来证明这个问题:http://jsfiddle.net/quaxkq40/

谢谢.

Answer 1

如果灵活的盒子布局是一个选项,它可以简单地通过将容器显示为弹性框并将嵌套的<div>s显示为弹性项来完成:

html, body {
  height: 100%;
  margin: 0;
}

.container {
  background-color: #dddddd;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

<div class="container">
    <div>Top</div>
    <div class="content">Middle</div>
    <div>Bottom</div>
</div>

注意:由于简洁,省略了供应商前缀.

否则,你最终可能会得到CSS表格:

html, body {
  height: 100%;
  margin: 0;
}

.container {
  background-color: #dddddd;
  display: table;
  height: 100%;
}

.container > div {
  display: table-row;
}

.content {
  height: 100%;
}

<div class="container">
    <div>Top</div>
    <div class="content">Middle</div>
    <div>Bottom</div>
</div>

上述每种方法都有自己的优点/缺点,请选择符合要求的方法.