Scrolling area cut off when using padding-top

Question

I'm working with a bootstrap template that has a fixed header, the content is set off using

padding-top

in order not to be hidden by that header, see this plnkr to get an idea.

The body has

overflow

set to

hidden

so that all the other parts of the UI (sidebar, context menu etc.) are confined to the current browser viewport.

The trouble starts if I enable

overflow-y

for the content, I tried to set

height

to

100vh

and although that brings the scrollbar back, the content is cut off at the bottom, which is totally plausible but I have no idea what to do about it.

Is there a straightforward solution?

Answer 1

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;  // <---
}

Plunker

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.

Scrolling area cut off when using padding-top

Sign up