All geek questions in one place

How to extend the sidebar to the full height of the page?

jsFiddle

<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 searched Google for the last few hours trying to find a solution. I don’t think I can Faux Columns , because the site is built on Bootstrap, so the width of the sidebar will change depending on the width of the browser.

+4
source share
1 answer

You must first set both html and body to height: 100% . Then, if you do not have a navigation bar, also from sidebar to height: 100% .

If you are using a non-fixed navigation bar, you must use absolute positioning.

Absolute positioning is in any case another way to solve this problem. After the height of the body and html set to 100%, set bottom: 0 and top: 0 along with position: absolute . And you should know that absolute positioning is calculated relative to the closing parent with position: relative .

+3
source

Source: https://habr.com/ru/post/1481839/

More articles:


All Articles