CODEWITHSUNDEEP
htmlcss
dvlden
dvlden

Reputation: 2462

How can I make a div 100% of window height?

I just want to have a sidebar that will be 100% of window height, but nothing works except this:

#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
height: 100%;
left: 0;
}

I don't want to have position: fixed, because I have horizontally scrollable content, so a fixed part would remain, well, fixed.

Is there any way to do such a thing, maybe with relative or absolute position?

Here's an quick Fiddle just for a test and explanation: JSFiddle

Upvotes: 20

Views: 93128

Answers (5)

Darren Wainwright
Darren Wainwright

Reputation: 30727

tl;dr - add html, body {height:100%;} to your CSS.

Percentage values in CSS are inherited from some ancestor that already has height declared. In your case, you need to tell all parents of your sidebar to be 100% height. I'm assuming that #sidebarBack is a direct child of body.

Essentially, your code above is telling #sidebarBack to be 100% height of its parent. Its parent (we are assuming) is body, so you need to set height: 100%; on body as well. We can't stop there, however; body inherits height from html, so we also need to set height: 100%; on html. We can stop here, because html inherits its properties from viewport, which already has a declared height of 100%.

This also means if you end up putting the #sidebar inside another div, then that div also needs height:100%;.

Here is an Updated JSFiddle.

Changed your CSS to:

html, body {
    height:100%;
}

#sidebar {
    background: rgba(20, 20, 20, .3);
    width: 100px;
    height: 100%;
    left: 0;
    float:left;
}

section#settings {
    width:80%;   
    float:left;
    margin-left:100px;
    position:fixed;
}

Upvotes: 36

fyarci
fyarci

Reputation: 549

You can use the new and so-useful-I-can't-imagine-what-took-W3C-so-long vh CSS unit:

height:100vh;

Upvotes: 44

Lee
Lee

Reputation: 13542

First, tell the body element to fill the window, rather than shrinking to the size of the content:

body { position: absolute; min-height: 100%; }

by using min-height instead of height, body will be allowed to expand beyond the window's height when the content is longer than the window (i.e. this allows for vertical scrolling when needed).

Now, set your "#sidebar" to be position:absolute, and use top:0; bottom:0; to force it to fill the parent element's vertical space:

#sidebar {
    position: absolute;
    top:0; bottom:0;
    left: 0;
    width: 100px;
    background: rgba(20, 20, 20, .3);
}

Here are a couple of jsFiddles:

As you'll see, in both examples, I've preserved your width setting on the "#settings" section, thus showing that horizontal scrolling works as you requested.

Upvotes: 7

Mak
Mak

Reputation: 604

Try this - 

html,body{height:100%;}
#sidebar {
background: rgba(20, 20, 20, .3);
/*position: fixed;*/
width: 100px;
height: 100%;
left: 0;
float:left;
}


section#settings {
width: 62%;
height: auto;
display: inline-block;
position: relative;
margin-left: 100px;
float:left;
}

​

Upvotes: 0

Simon West
Simon West

Reputation: 3788

Try the following

#sidebarBack {
 background: rgba(20, 20, 20, .3);
 position: fixed;
 width: 250px;
 top:0;
 bottom:0;
 left: 0;
}

Upvotes: 1

Related Questions