Я сделал картинку, чтобы меньше говорить. Надеюсь, ты поймешь. Проблема в том, что растягивание 100% высоты DIV под другим 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>
Благодарность!
1
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
13 Сен 2014 в 10:45
.stretching-height-div {
height: calc(100% - 40px);
background-color: #ff2266;
border-radius: 20px;
}
2
13 Сен 2014 в 10:44