Как сделать так, чтобы секция автоматически подбирала высоту и заполняла все свободное место? Т.е. чтобы белой полосы не оставалось снизу?
Есть ли варианты решить это на 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
, а не высота окна браузера
Вот такое нужно ?
* {
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>
* {
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>
Хотел сделать перемещение изображения по нажатию, написал код, он не работает:
В чём разница между детерменированной и недетерминированной функцией? Я надеялся, что deterministic заставит СУБД посчитать функцию чистой и закеширует...