Question

我正在制作一个背景设计很大的网站，我无法理解一些事情让我解释一下我想看到的内容。我的网站看起来几乎就像这个网站 http://www.deepend.com.au/-/website-development-fox8
1.用户加载页面
2.我页面中每个div的高度与浏览器窗口的高度相同，并且保持这样，所以滚动浏览我的页面变得更加逻辑。

所以我的问题是：CSS中的属性是否可以获得用户的浏览器窗口？或者我应该使用JavaScript？如果是JavaScript，是否有任何jQuery插件可以简化我的工作？
谢谢你的关注。

Answer 1

它只是一个巨大的图像，被设置为div的背景，在css中的大小为'cover'，这意味着它的宽度根据其宽高比确定其高度。

http://jsfiddle.net/f9yy8/4/

演示：http://jsfiddle.net/f9yy8/4/embedded/result/

* { padding: 0; margin: 0; overflow:hidden;}
html, body { height: 100%;}
.txt { 
    background-image: url("http://elstika.com/images/2013/09/Pink-Tulips-Bouquet-Huge-Hd-Wallpaper.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    height: 100%;
    color:white;
    padding: 30px;
}

Answer 2

您可以尝试对div使用position：absolute。

    div{
      position:absolute;
      width:100%;
     height:100%;
    }

Answer 3

要覆盖用户浏览器窗口的100％宽度/高度，您可以执行以下操作：

CSS

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

div.scroll {
    overflow: auto;
}

HTML

<html>
<body>
   <div class="scroll">All your content inside here</div>
</body>
</html>

Answer 4

你可以使用这个代码：

div{
    width:100vw;
    height:100vh;
}

这段代码像魅力一样...... :)

jsFiddle

大小div为浏览器的窗口高度和宽度

4 个答案: