如何使 div 填充剩余的垂直空间？ [复制]答案

【问题标题】：How to make a div fill remaining vertical space? [duplicate]如何使 div 填充剩余的垂直空间？ [复制]
【发布时间】：2026-01-09 00:55:01
【问题描述】：

我在页面中有两个主要部分 1) 顶部栏 2) 容器。 topbar 有一个固定的 50px 高度，容器应该有剩余的高度。

我尝试将容器高度设置为 100%，但它无法正常工作，因为它使网页占用 100% + 50px。因此，我得到了一个我试图避免的垂直滚动条。

这是一个演示我的问题的小提琴。请使用全屏查看http://www.bootply.com/ov2s9oOVku

我该如何解决这个问题？

更新 1

我尝试了张贴在此处 https://*.com/a/24979148/5936814 中的解决方案，但由于某种原因它对我不起作用。请看这个小提琴http://www.bootply.com/9iyQJ7Trw2。

【问题讨论】：

@JamesDonnelly 不工作bootply.com/9iyQJ7Trw2
顺便说一句，对于寻求解决方案的其他人来说，使用 flex 是解决问题的好方法。 css-tricks.com/snippets/css/a-guide-to-flexbox
...这是我链接的副本的公认答案所说的。

标签： css twitter-bootstrap-3

【解决方案1】：

另一种方法是使用display: flex

html, body{
	height:100%;
    margin: 0;
}
.wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.topbar {
  flex: 0 1 auto;
  height: 50px;
}
.container-fluid {
  flex: 1 1 auto;
}

<div class="wrapper">
  <div class="topbar" style="border: 2px solid red;"></div>

  <div class="container-fluid" style="border: 2px solid black;">
    <div class="row-fluid" style="border: 2px solid green;">
      <div class="col-lg-12"></div>
    </div>
  </div>
 </div>

【讨论】：

为了说明我之前的评论，它占用了全部可用的垂直空间，但它也弄乱了宽度，不再是全宽。
要让它完全按预期工作，可能还需要为.container-fluid 覆盖margin。否则，它不会像默认情况下那样跨越整个宽度。

【解决方案2】：

你可以使用高度：calc(100vh - 50px);

其中 50px 是顶栏的高度，100 vh 是 100% 的 viewheight。

viewheight(vh) 和 viewwidth (vw) 属性相当惊人

<div style="border: 2px solid red; height:50px"></div>

<div class="container-fluid" style="border: 2px solid black; height:calc(100vh - 50px);">

  <div class="row-fluid" style="border: 2px solid green; height:100%">
    <div class="col-lg-12"></div>
  </div>
</div>

【讨论】：

这需要我检查所有我想避免的固定问题。
没错，我做了一个不同的例子（见答案2）