I'm working with a bootstrap template that has a fixed header, the content is set off using
padding-top
overflow
hidden
overflow-y
height
100vh
html,
body {
height: 100%; // <---
}
section {
color: white;
padding-top: 50px;
height: 100%; // <---
font-family: "Segoe UI";
font-size: 14pt;
box-sizing: border-box; // <---
}
section div {
overflow-y: auto;
height: 100%; // <---
padding: 10px;
box-sizing: border-box; // <---
}
The idea is making html
, body
, section
and section div
height: 100%
so that they are stretched exactly as high as your viewport.
box-sizing: border-box
should be added to section
and section div
so as to include padding into the height of them.
With overflow-y: auto;
on section div
, the content is scrolled inside section div
.