获取视口的宽度并将其应用到标记或类宽度

我有水平布局，它有5个内嵌div。有没有一种方法在javascript中获取用户视口的宽度，然后将其应用于每个内容面板标记宽度，因此它在每个内容面板中都将达到100％？我需要它是100％的视口，因为里面有视差元素 enter image description here 获取视口的宽度并将其应用到标记或类宽度

我已经尝试过下面这个CSS代码，但面板只是堆叠在彼此之上。

#contentPanel { width: 100%; float: left;}

我真的不知道，如果这些问题让任何意义，因为我已经高达16小时搜索，试图来解决这一问题。

来源

2012-10-16 IAMTHESTIG

[确切的重复？]（http://stackoverflow.com/questions/3044573/using-jquery-to-get-size-of-viewport） – bookcasey

所以你有5个div，并且你想要每个与客户端视口一样宽。但你不想让div包装。其他div应该去哪里？离屏幕一侧？如果是这样，你将不得不使用绝对定位，或者更好的是，不要这样做。通过使用JS或jQuery动画将新的div和旧的div滑出来，看起来就像是发生了什么。 – Travesty3

@ Travesty3是的，我想让其他div离开屏幕，但如果我使用绝对定位，我将使用静态像素测量将5个div放在哪里。是的，我看过一些画廊传送带，但那不是我的目标。我将使用iscroll插件，这样我就可以拥有一个类似于iOS的滚动条。这里是一个水平滚动的演示：http://iscroll-js.googlecode.com/hg-history/bd496ab69c553b6e3d294c5f68200513215f5e75/examples/horizontal-scroll/index.html – IAMTHESTIG

这很容易使用jQuery：

var fullDiv = $("div"); 

var viewportWidth = $(window).width(); 
var viewportHeight = $(window).height(); 

$("body, html").width(3*viewportWidth); 
fullDiv.width(viewportWidth); 
fullDiv.height(viewportHeight);

简单Demo。

当浏览器调整大小时，您可能需要更新div，目前它只能在第一次加载时才起作用。阅读更多关于.resize()。

来源

2012-10-16 17:00:08 bookcasey

这段代码很神奇，我真的不想发布一个问题，直到我在google中找到合理的答案。但是，这...哦，是啊！非常感谢你。我可能需要长时间小睡或在此之后...... 顺便说一下，一旦浏览器调整大小后，重新加载页面可以吗？ – IAMTHESTIG

获取视口的宽度并将其应用到标记或类宽度

回答

相关问题