使div尽可能高而不会重叠

Question

我希望有这样的东西：

一个主要＆＃34;包装＆＃34; div将有几个内联的div。

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

我甚至可以用CSS实现这个目标，还是需要一点JS？

Answer 1

Flex是最好的，这里是codepen for you

codepen

.top{
  width:100%;
  height: 30px;
  background-color: #00cdcd;
}
.container {
  display: flex;
  background-color: teal;
}
.child{
  flex: 1;
  border: 1px solid black;
}

Answer 2

你可以通过css：

以多种方式实现它

第一个解决方案：

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

第二个解决方案：

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

Answer 3

你可以用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中的每个元素进行精确控制