html - 如何使着陆页 100% 的视口(viewport)？

Question

我正在尝试制作一个着陆页，它需要 100% 的视口(viewport)，example .如您所见，图片是宽度和高度的 100%。

我已经成功地使其成为宽度的 100%，但对于高度我还没有。图片比我的视口(viewport)大。

这是我的 CSS code :

body {
    background-color: #e3e3e3;
}

#main_wrapper {
    width:100%;
    height: 100%;
    float:left;
    background-image: url("http://imgur.com/B2y6wuI");
     background-position: center top;
    background-size: 100% auto;
}

#wrapper {
    width:970px;
    height:1000px;
    margin:0 auto 0 auto;
}

#landing {
    width:100%;
    height:800px;

}

Answer 1

如果您使用的是 html5/css3，您可以使用 height:100vh(而不是 %...vh = viewport height)...编辑:取决于您要支持的浏览器... http://caniuse.com/viewport-units