Css 如何使DIV填充浏览器窗口的剩余垂直空间？

我有一个简化的代码：

This is a line of text<br/>
<div style="background-color: orange; height: 100%">And this is a div</div>

这是一行文本

这是一个div

div高度最终是浏览器窗口客户端空间高度的100%，与文本行的高度相加，大于窗口高度，因此必须滚动

如何使div的高度等于浏览器窗口的高度减去文本行

---

或者，换言之，我如何让div在垂直方向上占用所有关于其他DOM对象已经占用的可用空间？

最终，您将需要一个容器。“溢出：隐藏”将隐藏溢出容器的任何内容。如果我们没有使用它，那么我们将看到您上面提到的关于“…超过窗口高度，因此您必须滚动”的问题

这是集装箱
此div应占据（容器）的其余高度。

隐藏溢出的示例：

---

未隐藏溢出的示例：

我也遇到了同样的问题。以下是我找到的解决方案：

<style>
.container{
    position: relative;
    height: 100%;
}
.top-div{
    /* height can be here. if you want it*/
}
.content{
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 1em; /* or whatever height of upper div*/
    background: red;
}
</style>
<div class="container">
    <div class="top-div">This is a line of text</div>
    <div class="content">And this is a div</div>
</div>

.集装箱{
位置：相对位置；
身高：100%；
}
.上分区{
/*高度可以在这里，如果你想的话*/
}
.内容{
位置：绝对位置；
左：0；
右：0；
底部：0；
顶部：1米；/*或上半部分的任何高度*/
背景：红色；
}
这是一行文字
这是一个div

---

source-

这可以通过使用

显示：table优雅地完成无需知道任何明确的高度值

此处演示：

html，正文{
高度：100%；//需要制作。布局100%高度
}
.布局{
显示：表格；
宽度：100%；
身高：100%；
}
.layout\u行{
显示：表格行；
}
.布局单元{
显示：表格单元格；
垂直对齐：中间对齐；
}
.layout__单元--最后一个{
高度：100%；//强制填充剩余垂直空间
}
第1行内容
第2行填充剩余的垂直空间。
我喜欢你的方法，因为它可能足以模拟OP的需求，但我想知道：如果orange div实际上有内容怎么办？当容器白色部分的内容变大时，
overflow:hidden
将“切断”该内容……如果内容溢出，则不起作用。没有滚动条和文本从浏览器窗口底部展开。我讨厌使用绝对定位，但这似乎是获得此结果的唯一方法。。。又是一个很好的例子。如果内容滚动，这将不起作用。如果文本行被换行为两行，这也将不起作用（调整窗口大小，使其没有足够的宽度显示该行可能会导致这种情况）。
<style>
.container{
    position: relative;
    height: 100%;
}
.top-div{
    /* height can be here. if you want it*/
}
.content{
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 1em; /* or whatever height of upper div*/
    background: red;
}
</style>
<div class="container">
    <div class="top-div">This is a line of text</div>
    <div class="content">And this is a div</div>
</div>

html, body {
  height: 100%; // required to make .layout 100% height
}

.layout {
  display: table;
  width: 100%;
  height: 100%;
}

.layout__row {
  display: table-row;
}

.layout__cell {
  display: table-cell;
  vertical-align: middle;
}

.layout__cell--last {
  height: 100%; // force fill remaining vertical space
}

<div class="layout">
  <div class="layout__row">
    <div class="layout__cell">
      Row 1 content
    </div>
  </div>
  <div class="layout__row">
    <div class="layout__cell layout__cell--last">
      Row 2 fills remaining vertical space.
    </div>
  </div>
</div>