javascript - 将 div 调整为浏览器窗口的高度和宽度

标签 javascript jquery css

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

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

最佳答案

它只是一个巨大的图像,设置为 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;
}

关于javascript - 将 div 调整为浏览器窗口的高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19756346/

相关文章:

javascript - 通过 Nashorn javascript jjs 进行 JMX 连接

javascript - 在 Dart 中压缩字符串

javascript - 在另一个 html 窗口中创建一个 html 窗口

javascript - swf 不透明 + div opacity chrome 和 osx 上的 opera

javascript - 根据选择框值更改文本

javascript - 如何删除某些空的新行/空格

javascript - 使用javascript返回标签的 "top"属性

javascript - Bootstrap 模态标题未显示 -::before::after

jquery - 使用 click 使函数无效?

javascript - 如何使用jquery缩放带有背景图像的内容?