Javascript 使div尽可能高而不重叠

我想要这样的东西：

一个主“包装器”div将有几个内嵌的div

我可以做到这一点，但我不知道如何使包装获得尽可能多的空间，但没有得到滚动条。在那之后，我需要把这4个内凹尽可能高

---

我甚至可以只用CSS来实现这一点，或者我需要一点JS吗？

只有使用CSS，才能通过多种方式实现：

第一个解决方案：

.wrapper {
  display: flex;  
}
.child {
  flex: 1;
}

.wrapper {
  display: table;
}
.child {
  display: table-cell;
}

第二种解决方案：

.wrapper {
  display: flex;  
}
.child {
  flex: 1;
}

.wrapper {
  display: table;
}
.child {
  display: table-cell;
}

---

您可以使用JS动态调整div的大小：

window.onresize = function () {

var w = window.innerWidth;
var h = window.innerHeight;

document.getElementById('wrapper').style.height = w + 'px';
document.getElementById('wrapper').style.width = h  + 'px';

}

---

因此，您可以对DOM中的每个元素进行精确控制。Flex最适合这种情况，这里是codepen

---

但这只是使容器元素与屏幕一样高，它仍然是重叠的，您可以添加

position:absolute到
顶部
元素