伸展高度DIV在固定高度的另一個DIV下

Question

我已經讓圖片少說話了。希望你會明白。 問題是，在其他具有固定高度的DIV下拉伸100％高度的DIV不能正確拉伸。

這裏的例子一起工作：jsfiddle

CSS：

.controlling-div { 
    width: 200px; 
    height: 200px; 
} 

.stretching-container-div { 
    width: 100%; 
    height: 100%; 
} 

.fixed-height-div { 
    height: 40px; 
    background-color: #ff8811; 
    border-radius: 20px; 
} 

.stretching-height-div { 
    height: 100%; 
    background-color: #ff2266; 
    border-radius: 20px; 
} 

HTML：

<div class="controlling-div"><!-- width & height can be changed --> 
    <div class="stretching-container-div"><!-- 100%-container --> 
     <div class="fixed-height-div"></div><!-- fixed height --> 
     <div class="stretching-height-div"></div><!-- height 100% - fixed height --> 
    </div> 
</div> 

謝謝！

Answer 1

使用這種風格的stretching-height-div。這裏的高度指的是100％減去40px（固定高度的高度）

它適用於我。這裏是一個DEMO

.stretching-height-div { 
    height: -moz-calc(100% - 40px); /* Firefox */ 
    height: -webkit-calc(100% - 40px); /* Chrome, Safari */ 
    height: calc(100% - 40px); /* IE9+ and future browsers */ 
    background-color: #ff2266; 
    border-radius: 20px; 
} 

Answer 2

jsfiddle

.stretching-height-div { 
    height: calc(100% - 40px); 
    background-color: #ff2266; 
    border-radius: 20px; 
}