-3

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/

  • Please provide some code, a JSFiddle/CodePen, or a snippet so you can be better assisted – Xhynk Mar 09 '18 at 17:21
  • Someone genuinely needs help and all some people can do is down vote the question without giving a reason! At the very least please leave a comment. –  Mar 09 '18 at 18:07
  • 1
    It's relatively specific, but honestly I don't think it's a terrible question. You have a request, what you've tried, and (later) provided a code sample, and it's not too vague. According to the [How to Ask](https://meta.stackexchange.com/help/how-to-ask) meta, questions ideally should pertain to others, though that's mainly to garner broader answer appeal. I think some nitpicky folk use that as a "specific questions don't belong here" - despite you otherwise asking a thorough question. – Xhynk Mar 09 '18 at 18:37

1 Answers1

1

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

Xhynk
  • 13,513
  • 8
  • 32
  • 69
  • Thanks, I'll try this later. You said the table inside the table makes it harder to do this. Do you think I've got the markup completely wrong for a full screen app? I couldn't find any other way, other than flex box, but I didn't have time to learn it so went with this approach. –  Mar 09 '18 at 18:47
  • Native and `display` tables generally don't display well in a sub-full screen app (they don't respond to size restrictions well) if you've got a more complex layout, and should really only be used for it's namesake "tabular" data (like the "blah blah blah" you have). Strict CSS will let you achieve the "app" portion with `floats` or `inline-block` elements, or you can use simple Grid frameworks like `Simple Grid`, `ungrid`, or robust ones like Bootstrap. Alternatively there's CSS Grid or Flex like you mentioned, but they aren't strictly necessary in this case. – Xhynk Mar 09 '18 at 18:53
  • Thanks for your help. –  Mar 10 '18 at 09:54