在另一个具有固定高度的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

jsfiddle

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

Answer 2

将此样式用于stretching-height-div。这里的高度指的是100％减去40px（固定高度div的高度）

对我来说很好。这是 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;
}