<div id="wrapper" class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="span2 sidebar">sidebar</div>
<div class="span10 content">content</div>
</div>
</div>
</div>
I've been searching Google for the past few hours trying to find a solution. I don't think I can do Faux Columns because the site is built on Bootstrap, so the sidebar width will change depending on the width of the browser.
You must first set both the html
and body
to height: 100%
. Then, if you don't have a navbar, also the sidebar
to height: 100%
.
If you are using a non-fixed navbar, you must use absolute
positioning.
Absolute positioning is anyway another way to solve this. After having the height of body
and html
set to 100%, set bottom: 0
and top: 0
, together with position: absolute
. And you must know that the absolute
positioning is computed relative to the closes parent having position: relative
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With