Make sidebar height 100% of the browser window

Question

I have a issue with the left sidebar.

I would like to make the left sidebar 100% height of the browser always no matter what content is there in right hand panel.

<div class="container">
    <div class="leftwrapper">Some text</div>
    <div class="rightwrapper">Some text for right</div>
</div>

Fiddle -- http://jsfiddle.net/squidraj/32uppbhy/

score 4 · Answer 1 · answered Aug 07 '14 at 10:18

4

Add the following rule to the top of your CSS:

html, body, .container, .leftwrapper {height:100%;}

answered Aug 07 '14 at 10:18

Luke Baughan

4,658
3
31
54

Thank you so much for your kind help.It's just one liner code. – Raj Aug 07 '14 at 10:23
1

No worries, happy to help - I like to keep things as simple as humanly possible ;o) – Luke Baughan Aug 07 '14 at 10:31

score 4 · Accepted Answer · answered Aug 07 '14 at 10:18

Percentage heights are relative, you want the containing element .container to stretch the full height of the viewport, so it needs a height of 100%, but 100% of what? So you also need to set it on your html and body elements. Then simply give your absolutely positioned sidebar bottom:0; to stretch it the full height.

Simply change your CSS thus:

html, body { /* ensure the available document space is the full height of the viewport */
    height:100%;
    padding:0;
    margin:0;
}
.container {
    overflow: hidden;
    position: relative;
    height:100%; /* <-- make the containing element full height */
}
.leftwrapper {
    background-color: #0b7582;
    bottom: 0;
    float: left;
    position: absolute;
    text-align: center;
    top: 0;
    width: 8%;
    bottom:0; /* <-- anchor the element to both the top and the bottom of the viewport */
}
.rightwrapper {
    float: left;
    margin-left: 8%;
    width: 92%;
}

This is correct, keep in mind though that float doesn't work on an absolute positioned element. — Sander Koedood, Aug 07 '14 at 10:25

score 3 · Answer 3 · answered Aug 07 '14 at 10:20

Few elements derive their height from body and html tags as their parent. What you can do is simply create a new css rule for body and html tag with a height property of 100% and then another rule for your sidebar height to be 100%. Hope it works :)

CSS rules:

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

Make sidebar height 100% of the browser window

3 Answers3