CODEWITHSUNDEEP
javascripthtmlcssfrontendweb-frontend
user2363676
user2363676

Reputation: 341

Trying to achieve some kind of scrollable container with dynamic height

I have <div> with some dynamic content inside - sometimes it is table, sometimes it is text. I'm trying to setup some kind of container which would be scrollable on y-axis if its contents are too big for the screen.

Some googling suggests that its simple to do if you hardcode height of the div, but what should I do if I want to avoid specifying exact pixel sizes anywhere?

From what I understand, I'll have to calculate remaining vertical visible screen space first, then set it as div height. This seems like a fairly common task, yet I can't find any components(don't care if they are jquery dependent or not) that would accomplish this.

Any suggestions? Already existing solution(plugin, library, etc) is preferred.

Upvotes: 0

Views: 37

Answers (1)

mpetrov
mpetrov

Reputation: 391

If you would like the container height to start scrolling when it matches the viewport height, you can just give it height or max-height equal to 100vh (100% viewport height).

In case there are other elements outside of the container and it shouldn't take the full screen height you can use calc() to limit it:

.container { max-height: calc(100vh - 100px); }

Upvotes: 1

Related Questions