Making div 100% height of browser window

Question

I have two columns for my website and right now the background color ends at the last piece of content in the left column (which is for navigation).

I've tried height:100%, min-height:100%; etc. Doesn't seem to work. here's the css.

.container {
    width: 100%;
    height:100%;
    min-width: 960px;
    background: #fbf6f0;
    margin: 0 auto; 
    overflow: hidden;
}

#sidebar1 {
    float: left;
    position:absolute;
    width: 20%;
    height:100%;
    min-width:220px;
    background: none repeat scroll 0% 0% #007cb8;
    z-index:9999;
}

possible duplicate of [For div to extend full height](http://stackoverflow.com/questions/4535983/for-div-to-extend-full-height) — karthikr, Apr 11 '13 at 18:36
possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — Yarin, Jan 25 '15 at 22:56

score 8 · Answer 1 · edited May 23 '17 at 12:25

8

Use viewport height - vh.

.container {
height: 100vh;
}

Update

Please note, there are potential issues with using VH on Safari iOS. See this thread for more information: Chrome / Safari not filling 100% height of flex parent

edited May 23 '17 at 12:25

Community

1
1

answered Jun 29 '14 at 05:25

JSeligsohn

91
1
5

score 5 · Answer 2 · answered Apr 11 '13 at 18:35

5

Set the body height too

body,html{
  height:100%;
}

div {
  height:100%
}

answered Apr 11 '13 at 18:35

Kevin Lynch

24,427
3
36
37

score 0 · Answer 3 · answered Apr 11 '13 at 18:36

The reason the div doesn't fill the entire window by default if because it's parent, the <body> tag probably, only stretches as heigh as it needs to. Add this at the top of your stylesheet (I like to order styles in a similar order to that of the tags in the markup):

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

edit: grammar

score 0 · Answer 4 · edited Nov 28 '13 at 20:57

0

overflow-y: auto;

This css code is for your solution.

edited Nov 28 '13 at 20:57

kero

10,647
5
41
51

answered Nov 28 '13 at 20:32

Making div 100% height of browser window

4 Answers4

Related