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

Question

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

Forgive me, but I'm a little curious - If you are able to scroll it, doesn't that defeat the idea of making it the height of the page? — George, Nov 28 '12 at 16:17
Do you want the sidebar to scroll out of the window, or stay where it is? And hide the scrollable code under the sidebar? — EricG, Nov 28 '12 at 16:20
I want it to scroll out of the window if content is being scrolled. Like a relative/absolute position... Just like Wordpress admin panel... They have something similar... — dvlden, Nov 28 '12 at 16:22

score 44 · Answer 1 · edited Mar 23 '14 at 21:23

44

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

height:100vh;

edited Mar 23 '14 at 21:23

Miller

34,962
4
39
60

answered Mar 23 '14 at 21:02

fyarci

549
4
6

and if i have a menu bar on top? – Toolkit Jun 09 '15 at 03:08
Why the hell everyone keeps suggesting on using `vh`... If you have a navbar at the top (fixed), you would face a pain on mobile devices, because it would be overlapped by a browser's navbar, and you won't do anything with that. – Alexander Kim May 23 '19 at 16:54

score 36 · Accepted Answer · edited Aug 13 '14 at 18:29

36

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;
}

edited Aug 13 '14 at 18:29

TylerH

20,799
66
75
101

answered Nov 28 '12 at 16:19

Darren Wainwright

30,247
21
76
127

Hmmm if I add this it makes my content scrollable horizontally and vertically and does not give 100% height to sidebar in relative/absolute position. – dvlden Nov 28 '12 at 16:24
right - a lot of people forget that the tags: html, body, form are still HTML elements that don't have a default height of 100% - they need to be set manually. – Losbear Nov 28 '12 at 16:25
@NenaddvL I'm not sure why you've selected this answer, as it doesn't appear to accomplish what you asked for. Among other issues, this answer effectively disables all scrolling by setting `position:fixed` on your `#settings` section. I've added an answer below that I think will be a more complete solution to your problem (see here: http://stackoverflow.com/a/13610461/416630). – Lee Nov 28 '12 at 17:05
@Darren I have noticed more than one question be marked as a duplicate of this one, so I have added some more information to your answer and revised the question to better serve as a canonical Q&A in the future. Feel free to adjust your answer as you wish to improve it! – TylerH Aug 13 '14 at 18:32

score 7 · Answer 3 · answered Nov 28 '12 at 17:01

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.

I am having issues with every single answer. None actually resolves the problem. Except checked answer if I replace his fixed to absolute position on #settings. However neither that way it is good because html, body 100% gives me scrollable page in height and that is now what I want. I think I will change design and positions because it definetly does not go this way. Thanks for your help too! — dvlden, Nov 28 '12 at 17:52

score 1 · Answer 4 · answered Nov 28 '12 at 16:21

1

Try the following

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

answered Nov 28 '12 at 16:21

Simon West

3,708
1
26
28

Hmmm not quitely what I need. It remain fixed and just pulls it over header because of top:0; – dvlden Nov 28 '12 at 16:24

score 0 · Answer 5 · answered Nov 28 '12 at 16:25

0

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;
}

answered Nov 28 '12 at 16:25

Mak

584
1
13
33

Doesn't make sidebar 100% height still :( – dvlden Nov 28 '12 at 16:28

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

5 Answers5

Linked

Related