使 div 为浏览器窗口的 100% 高度

我的网站有两列，现在背景颜色以左列的最后一段内容结束（用于导航）。

我试过高度：100％，最小高度：100％；等等似乎不起作用。这是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;
}

使用视口高度 - vh。

.container {
height: 100vh;
}

Update

请注意，在 Safari iOS 上使用 VH 存在潜在问题。请参阅本主题以获取更多信息：Chrome / Safari 未填充 Flex 父级的 100% 高度 https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent