Aredhel Aredhel - 5 months ago 10
CSS Question

Scrolling area cut off when using padding-top

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
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.

Comments