Aredhel Aredhel - 1 year ago 44
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

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

The body has
set to
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
for the content, I tried to set
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 Source
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.