Question

我尝试制作着陆页，并且需要100％的视口example。如您所见，图片是宽度和高度的100％。

我已经成功将其宽度调整为100％，但对于高度我还没有。图片比我的视口大。

这是我的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，您可以使用高度：100vh（而不是％... vh =视口高度）...编辑：取决于您要支持的浏览器.. http://caniuse.com/viewport-units < / p>

Answer 2

使用css3你可以

#main-wrapper{ 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 3

你能澄清一下你在这里要做什么吗？如果您想要一个可以扩展到视口宽度和高度的全尺寸背景图像，那么很多CSS都是不必要的。肯定有不止一种方法给猫皮肤，但在这种情况下CSS3允许我们使用

background-size: cover;

http://jsfiddle.net/LtMpw/6/

如何使着陆页100％的视口？

3 个答案: