在另一个固定高度的DIV下拉伸高度DIV

Question

我拍这张照片是为了少说话。希望你能理解。问题是，在其他固定高度的DIV下拉伸100%的DIV并不能适当地拉伸。

​

​

下面是要使用的示例：小提琴

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%减去40‘s(固定高度-div的高度)。

对我来说很好。这是一个演示

.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

小提琴

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