0

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

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

4

4 回答 4

2

它只是一个巨大的图像，设置为 div 的背景并在 css 中设置为“封面”，这意味着它的宽度根据其纵横比决定其高度。

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;
}
于 2013-11-03T18:49:17.687 回答
1

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

    div{
      position:absolute;
      width:100%;
     height:100%;
    }
于 2013-11-03T18:46:23.130 回答
0

要覆盖用户浏览器窗口的 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>
于 2013-11-03T18:50:41.583 回答
0

您可以简单地使用以下代码：

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

这段代码就像一个魅力......:)

jsFiddle

于 2013-11-03T19:17:40.880 回答