как изменять высоту блока в зависимости от изменения высоты двух блоков выше

352
17 июля 2017, 14:10

Друзья, вот такой пример у меня:

<div class="filterform>
 <div class="title"></div>
 <div class="content"></div>
 <div class="buttons"></div>
</div>

Вот такой CSS:

.filterform{
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: calc(100% - 20px);
  height: -webkit-calc(100% - 40px);
  height: -moz-calc(100% - 40px);
  height: calc(100% - 40px);
}
.buttons{
height:60px;
}

Высота .title может меняться.

Мне необходимо изменять высоту класса .content по такой формуле: Вся высота формы - высоту .title - высоту .buttons. Во время скролинга высота формы может меняться, поэтому js я бы не хотел применять для установки css. Как можно решить этот вопрос чистым css?

Answer 1

html, 
body { 
  height: 100%; 
  padding: 0px; 
  margin: 0px; 
} 
 
.filterform { 
  display: flex; 
  flex-direction: column; 
  width: -webkit-calc(100% - 20px); 
  width: -moz-calc(100% - 20px); 
  width: calc(100% - 20px); 
  height: -webkit-calc(100% - 40px); 
  height: -moz-calc(100% - 40px); 
  height: calc(100% - 40px); 
} 
 
.title { 
  min-height: 60px; 
  background: #000; 
} 
 
.content { 
  flex: 1 0; 
  padding: 20px; 
  background: #f00; 
} 
 
.buttons { 
  height: 60px; 
  background: #000; 
}
<div class="filterform"> 
  <div class="title"></div> 
  <div class="content "></div> 
  <div class="buttons "></div> 
</div>

READ ALSO
Как отключить скролл за пределы экрана?
HTML

Как отключить скролл за пределы экрана?

Работаю над мобверсией сайта

 432
Как изменить цвет поисковой строки в мобильном Google Chrome
HTML

Как изменить цвет поисковой строки в мобильном Google Chrome

Мне надо сделать цветной панель поиска в Google Chrome, например, как у лайфхакера:

 489
Реализация слайдера. jQuery
HTML

Реализация слайдера. jQuery

В учебных целях хочу реализовать свой слайдер, с реализацией есть проблемыПотратил много времени, стер и начал заново, текущая реализация...

 255
Ошибка PHPMailer
HTML

Ошибка PHPMailer

ЗдравствуйтеУстановил phpMailer сначала на локальный сервер OpenServer

 412