Geek Answers Handbook

Extend the sidebar to full page height

I have this: http://jsfiddle.net/s75ew662/7/

How can I stretch the left sidebar (gray) to full page height?

.container { width: 750px; margin: 0 auto; } .sidebar { width: 200px; background: lightgrey; float: left; } .content { background: lightblue; float: left; width: 550px; } 
 <div class="container"> <div class="sidebar"> <div>1</div> <div>2</div> </div> <div class="content"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div>
+5
source share
6 answers

The easiest way based on your current code is to use view units.

 .sidebar { height: 100vh; } 

 body { margin: 0; } .container { width: 750px; margin: 0 auto; } .sidebar { width: 200px; background: lightgrey; float: left; height: 100vh; } .content { background: lightblue; float: left; width: 550px; } 
 <div class="container"> <div class="sidebar"> <div>1</div> <div>2</div> </div> <div class="content"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div>

If you need to support older browsers, you can do this instead.

 html, body, .container{ height: 100%; } .sidebar { min-height: 100%; } 

 html, body, .container{ height: 100%; margin: 0; } .container { width: 750px; margin: 0 auto; } .sidebar { width: 200px; background: lightgrey; float: left; min-height: 100%; } .content { background: lightblue; float: left; width: 550px; } 
 <div class="container"> <div class="sidebar"> <div>1</div> <div>2</div> </div> <div class="content"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div>

To fix scrolling + overflow problems when content is above the sidebar. Minor markup changes are needed, see JsFiddle Demo.

 html, body, .container { height: 100%; margin: 0; } .container { width: 750px; margin: 0 auto; display: table; } .sidebar { display: table-cell; width: 200px; } .content { display: table-cell; width: 550px; } .sidebar .inner { height: 100%; background: lightgrey; } .content .inner { background: lightblue; } .content .inner div { height: 100px; /*testing*/ } 
 <div class="container"> <div class="sidebar"> <div class="inner"> <div>1</div> <div>2</div> </div> </div> <div class="content"> <div class="inner"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> </div>
+3
source

As a very simple solution, you can use the vh measurement unit, which corresponds to the percentage of viewing height.

 .sidebar { width: 200px; height: 100vh; background: lightgrey; float: left; }

Keep in mind that in doing so you need to consider the fields that are in place. I posted a working example as a fork for your jsfiddle here: https://jsfiddle.net/01ubpbfg/

0
source

In the css file, add the following to the sidebar class:

 height:100vh;
0
source

Updated to solve overflow problem

adding these four CSS styles will result in the following:

 html { height: 100%; } body { height: 100%; } .container { height: 100%; overflow: hidden; } .sidebar { height: 100%; }
0
source

http://jsfiddle.net/s75ew662/17/

 .sidebar { width: 200px; background: lightgrey; float: left; position: absolute; height: 100%; }
0
source

A very late answer, none of the above helped me. I have a working solution, can help someone. Using a flexible cable along with a viewing port for minimum height helps to cover the side panel over the entire page.

this code assumes a top level height of 51px;

 .user-content { display: flex; } .user-content .side-bar-content { flex : 1; flex : 0 0 220px; background: #f1f1f1; min-height: calc(100vh - 51px); //min-height: 100vh; // without topbar } .user-content .app-user { flex : 2; padding: 0 0 15px 15px; }
0
source

More articles:


All Articles