Занять div`ом всю оставшуюся высоту. Как?

248
20 октября 2017, 13:17

Использую Bootstrtap 4. div-у с классом h100percent необходимо занять всю оставшуюся высоту в div-е wrapper. При этом Header фиксированной высоты располагается сверху, а footer фиксированной высоты снизу. Высота блока 100% т.е. разная от монитора к монитору.

P.S. В div .h100percent будет другой див размером больше него самого, т.е. должна быть полоса прокрутки overflow: auto. h100percent должен занять оставшееся место по высоте от футера и хэдера. P.P.S "Как всегда прижимать footer к низу экрана?" не решает моей проблемы, там блок контента не занимает все оставшуюся высоту.

div { 
  padding: 10px; 
} 
 
.wrapper { 
  position: fixed; 
  width: 300px; 
  height: 100%; 
} 
 
.h100percent { 
  /* Занять все оставшееся место */ 
}
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
  <!-- Bootstrap 4 --> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
  <title>Help me!</title> 
</head> 
 
<body style='background-color: #BDBDBD'> 
 
  <div class="wrapper" style='background-color: BROWN; '> 
    <div class="container" style='background-color: ORANGE'> 
      <div class="row" style='background-color: GREEN'> 
 
        <div class="col-12" style='background-color: BLUE'>Header</div> 
 
        <div class="col-12 h100percent" style='background-color: GoldenRod'>Этот блок должен занять всю оставшуюся высоту</div> 
 
        <div class="col-12" style='background-color: CORAL'>Foter</div> 
      </div> 
    </div> 
  </div> 
 
</body> 
 
</html>

Answer 1

Для такой задачи подходит flex-box. Нужно разместить блоки в контейнере flex 100%-высоты, а в блок, который нужно растянуть, добавить правило flex-grow 

.flex { 
  display: flex; 
  flex-direction: column; 
  height: 100vh; 
} 
 
body { 
  margin: 0; 
  padding: 0 
} 
 
.header { 
  background: green 
} 
 
.h100 { 
  background: yellow; 
  flex-grow: 3 
} 
 
.footer { 
  background: red 
}
<div class=flex> 
  <div class=header>Верхний блок</div> 
  <div class=h100>Контент</div> 
  <div class=footer>Нижний блок</div> 
</div>

Answer 2

Если header и footer фиксированной высоты, допустим по 70px, можно сделать так:

.h100percent {
  height: calc(100vh - 140px);
}

Тогда ваш .h100percent получит высоту, равную высоте окна браузера и вычтет высоту хедер+футер

READ ALSO
Почему на Safari слайдер листается медленно, на всех остальных браузерах хорошо?
HTML

Почему на Safari слайдер листается медленно, на всех остальных браузерах хорошо?

Всем приветТакая ситуация: Настраивал слайдер на сайт, брал от сюда

 231
Выбор языка на сайте
HTML

Выбор языка на сайте

Делаю сайт на html без шаблона по такой схеме:

 430
Билд Angular 2 + Electron
HTML

Билд Angular 2 + Electron

При сборке Electron приложения в главном js файле указывается стартовая страница (indexhtml)

 260
Не правильно считает слайды [требует правки]
HTML

Не правильно считает слайды [требует правки]

Не правильно считает слайды, в консоль даже id не правильно передает

 247