css - CSS 中间 div 高度

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

小提琴

编辑

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

Answer 2

工作小提琴

只需在代码中更改以下 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