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

我正在制作一个大背景设计的网站，我无法理解几件事情。
让我解释一下我想看到的。我的网站会寻找几乎像这个网站 http://www.deepend.com.au/-/website-development-fox8
1.用户加载页面
2.身高在我的网页每一个DIV变得一样的浏览器窗口的高度，并保持这个样子，让你的滚动通过我的页面变得更加逻辑。

所以我的问题是：有没有在CSS，可以让用户的浏览器窗口属性？或者我应该使用JavaScript？如果JavaScript，有没有任何jQuery插件来简化我的工作？
感谢您的关注。浏览器窗口高度和宽度的大小div

来源

2013-11-03 eoLithic

在你只提供了第一个图像的例子网站是100％浏览器窗口的高度。他们使用JavaScript滑块插件。 – otherDewi

它只是被设置为一个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-03 18:49:17 Techsin

谢谢！其实我不得不删除'overflow：hidden'来达到我想要的效果！我真心地感激您。 – eoLithic

您可以尝试使用的位置是：绝对的div的。

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

来源

2013-11-03 18:46:23 user2360754

为了弥补用户的浏览器窗口的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-03 18:50:41

你可以简单地使用此代码：

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

此代码的工作就像一个魅力... :)

jsFiddle

来源

2013-11-03 19:17:40

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

回答

相关问题