Я сделал картинку, чтобы меньше говорить. Надеюсь, ты поймешь. Проблема в том, что растягивание 100% высоты DIV под другим DIV с фиксированной высотой не растягивается должным образом.

Problem is

Вот пример для работы: 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>

Благодарность!

1
bea 13 Сен 2014 в 10:21

2 ответа

Лучший ответ

Используйте этот стиль для stretching-height-div. Здесь высота означает 100% минус 40 пикселей (высота с фиксированной высотой 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;
}
1
Sam1604 13 Сен 2014 в 06:45

jsfiddle

.stretching-height-div {
    height: calc(100% - 40px);
    background-color: #ff2266;
    border-radius: 20px;
}
2
himanshu 13 Сен 2014 в 06:44