Как растянуть весь контент на всю высоту экрана?

214
16 августа 2018, 02:30

Как сделать так, чтобы секция автоматически подбирала высоту и заполняла все свободное место? Т.е. чтобы белой полосы не оставалось снизу?

Есть ли варианты решить это на CSS? Если нет, то как это решить на JS?

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  height: 100vh; 
} 
 
header { 
  width: 100%; 
  height: 50px; 
  background-color: red; 
} 
 
section { 
  height: 100px; 
  width: 100%; 
  background-color: blue; 
} 
 
footer { 
  height: 300px; 
  width: 100%; 
  background-color: green; 
}
<div class="wrapper"> 
  <header></header> 
  <section></section> 
  <footer></footer> 
</div>

P.S. Мои наброски на JS

var header = document.querySelector('header'); 
var footer = document.querySelector('footer'); 
headerH = parseInt(getComputedStyle(header).height); 
footerH = parseInt(getComputedStyle(footer).height); 
var screenHeight = parseInt(document.body.clientHeight); 
var pageSection = document.querySelector('section'); 
pageSection.style.height = screenHeight - headerH - footerH + 'px';

Но тут, что-то не так высчитывается, вероятно потому-что document.body.clientHeight это высота body, а не высота окна браузера

Answer 1

Вот такое нужно ?

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
} 
 
header { 
  width: 100%; 
  height: 50px; 
  background-color: red; 
} 
 
section { 
  height: 100px; 
  width: 100%; 
  flex-grow: 1; 
  background-color: blue; 
} 
 
footer { 
  height: 300px; 
  width: 100%; 
  background-color: green; 
}
<div class="wrapper"> 
  <header></header> 
  <section></section> 
  <footer></footer> 
</div>

Answer 2

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body, 
.wrapper { 
  height: 100%; 
} 
 
header { 
  height: 50px; 
  background-color: red; 
} 
 
section { 
  /* 100% - (header height + footer height ) */ 
  height: calc(100% - (50px + 300px)); 
  background-color: blue; 
} 
 
footer { 
  height: 300px; 
  background-color: green; 
}
<div class="wrapper"> 
  <header></header> 
  <section></section> 
  <footer></footer> 
</div>

READ ALSO
Переместить изображение по нажатию

Переместить изображение по нажатию

Хотел сделать перемещение изображения по нажатию, написал код, он не работает:

190
function - Смысл флага deterministic

function - Смысл флага deterministic

В чём разница между детерменированной и недетерминированной функцией? Я надеялся, что deterministic заставит СУБД посчитать функцию чистой и закеширует...

221