Question

我有以下css http://jsbin.com/azivip/75/edit我希望黄色div高度填充蓝色和绿色div之间的空间。使用高度继承似乎使div超越了绿色div。

请问好吗？

由于

Answer 1

您可以使用css3 calc()：

#testsContainer { 
   height: calc(100% - 140px);
}

140px = 100px of resultsContainer + 40px of buttonsContainer

fiddle

修改

对于较旧版本的Firefox使用-moz-calc()前缀，对于旧版Chrome / Safari，请使用-webkit-calc()前缀。

Answer 2

<强> Working fiddle

只需在代码中更改以下css：

 #testsContainer {
     position:absolute; /* replace with position: relative */
     top:100px;  /* height of the above container */
     bottom:40px; /* height of the below container */
     left:0px;
     right:0px;
     margin-top:0px;
     margin-bottom:0px;
     background-color:yellow; 
 }

将top值等于div#resultsContainer和bottom的高度等于div#buttonsContainer的高度。
提供left: 0和right:0。这样容器可以占用空间而不使用javascript或calc（）css属性的支持。
删除height:inherit
将position: relative替换为position: absolute

CSS中间div高度

2 个答案: