Hi all,
Wondering if anyone has successfully managed to get an element, e.g. a sidebar to be responsive vertically with Bootstrap 4? I know it’s possible - and I’ve tried about 4/5 different approaches from Stackoverflow, w3schools etc. but cannot seem to get it nailed.
If anyone has achieved this, I’d be super grateful to hear how!
I’m not exactly sure what your requirement is but you can use vh for viewport height, so 100vh is 100% of viewport height. Also you can write 50% or 20em…etc
What exactly are you trying to achieve?
I have a side nav menu in a layout (nodeJs), that doesn’t stretch to the full height of the page when the page content is less than the full height.
Just trying to figure out how to make this happen. I’ve tried about 4/5 variants without success yet - I know it’s possible so just looking for some feedback from the forum.
@fdgfdgfdg - thank you, I’m going to try this option right away.
Thank you @fdgfdgfdg - this worked perfectly!!
Sorry @fdgfdgfdg - I spoke too soon! This does work if there is no scroll - but it’s only stretching to the current viewpoint size, and if the page scrolls - it is not stretching responsively! Any other ideas?
Combine sticky utility class from BS4 and the solution provided by @fdgfdgfdg
If sticky does not work, you can play around with fixed/absolute positions too. These things are a bit tricky depending on the layout of the page and where such sidebars are being placed. Sometimes, it works in 1 go, and sometimes you can waste hours on this.