为什么不这样呢？

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

给html和body（按顺序）一个高度，然后给元素一个高度？

为我工作

CSS3简单方法

height: calc(100% - 10px); // 10px is height of your first div...

现在所有主流浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。

实际上，您可以使用display:table将区域拆分为两个元素（页眉和内容），其中页眉的高度可以不同，而内容将填充剩余的空间。这适用于整个页面，也适用于区域仅是位置设置为相对、绝对或固定的另一个元素的内容的情况。只要父元素具有非零高度，它就可以工作。

请参见此小提琴以及以下代码：

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML格式：

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

我为此纠结了一段时间，最后得出了以下结论：

由于很容易使内容DIV与父对象的高度相同，但显然很难使其为父对象高度减去标头高度，因此我决定使内容DIF为全高度，但将其绝对放置在左上角，然后为顶部定义一个填充，该填充具有标头的高度。这样，内容会整齐地显示在标题下，并填充整个剩余空间：

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

对我有效的方法（在另一个div中包含一个div，我假设在所有其他情况下）是将底部填充设置为100%。也就是说，将其添加到css/样式表中：

padding-bottom: 100%;

对我来说，最简单的方法就是使用网格。但是，我正在寻找一种更简单的方法。下面是我是如何做到这一点的。但是，如果我们有很多嵌套的div，那就太痛苦了。

 <div style={{
  display:grid,
  gridTemplateRows:'max-content 1fr',
}}>
   <div>
     Header
   </div>
   <div style={{height:'100%',minHeight:'0'}}>
     Content
   </div>
 </div>