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

Answer 1

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

Answer 2

Set the body height too

body,html{
  height:100%;
}

div {
  height:100%
}