Bootstrap 3: sidebar 100% height always on screen [closed]

Question

I'm trying to reach the following result: I need left col-md-3 to stay always 100% height and always on screen - it's a menu. The right side is as usual with scrolling available etc.

Thanks in advance!

Answer 1

Using bootstrap in this situation may not be your best solution. I love bootstrap however you don't need to use it for everything and this may be the case here, however I'm sure you could make that work.

Draw your page layout as you see it working and see if your idea of a sidebar suits the bootstrap 'grid'. Does it make sense to have all of your content wrapped in a row that is 100% the height of the screen?

Really it sound like what you want is a sidebar div with with absolute positioning set to 100% screen height. To make it responsive just create some css media queries to handle that.

Your content div on the right you can build up with bootstrap as you like.

Here's a link to a similar problem with an answer:

Creating a fixed sidebar alongside a centered Bootstrap 3 grid

Hope it helps!

Answer 2

Bootstrap has a plugin called Affix which can be used to accomplish what you're looking to do.

But, generally speaking you can use position:fixed for this and don't need to use Bootstrap at all.