cssfullscreenscrollbars

How to add scrollbars in a content area of a full screen web app i.e. 100% height of screen using CSS

I have a full screen web app. I'm using CSS 100% height on HTML, body and parent elements. I have a contents table which grows as items are added to it. I am trying to have a vertical scrollbar automatically appear when there is not enough space.

I have tried using different combinations of overflow-y:auto; overflow:auto; on the tbody, table and the surrounding div (which is also 100% height) but nothing seems to work. Is it even possible with 100% heights? Does overflow require a fixed height?

Edit

Here is some code. The left hand column contains the table to which I'd like to add a vertical scrollbar when there's not enough space.

https://jsfiddle.net/468cpvmv/

Solution

  • Unfortunately, you're using a table in a faux-table which makes it much harder to do this right.

    You're setting the fieldset > div to it's inherited height which is the height of the table inside.

    If you instead base it off the viewport height, you can get your desired result, specifically using calc. Currently you have 45px of "extra stuff" (padding, headers, etc.) that you want to remove from the calculation, so you can add this declaration:

    .page-contents .left-col fieldset > div {
    max-height: calc( 100vh - 45px );
    overflow-x: auto;
}

    Here's a fiddle: https://jsfiddle.net/468cpvmv/9/

    These are the heights you want to subtract in your calculation:

    These are the heights you want to subtract in your calculation