CODEWITHSUNDEEP
javascripthtmlcssscrollbar
ControlAltDel
ControlAltDel

Reputation: 35011

Possible to set max-height on an element with position fixed just once?

I have a sidebar (id="sidebar") set up with position=fixed on the top right hand corner.

The issue is when the window height is smaller than the sidebar, I want the sidebar to have a scrollbar. Currently, I have a function where I am setting max-height, called by window.resize as well as in some other places:

$("#sidebar").css("max-height", window.innerHeight - 15);

This is working, and the scrollbar appears and works as it should when I resize my window smaller than the sidebar. My question is: Is there possibly a way where I could avoid having to set max-height on every resize event, and instead calling something once on setup and still get the same scrolling behavior?

Upvotes: 0

Views: 103

Answers (1)

Kosh
Kosh

Reputation: 18393

You don't need JS for this. Use CSS:

#sidebar {max-height:calc(100vh - 15px)}

Upvotes: 3

Related Questions