Div与视区相同的大小不能正确调整大小
Div与视区相同的大小不能正确调整大小
提问于 2013-04-21 12:40:07
在初始页面加载时，我希望div占据视口空间(如this example)。我使用了以下代码：
$("#intro").height($(window).height());
$(window).resize(function(){
$("#intro").height($(window).height());
});它可以很好地拉伸div，但问题是当我调整浏览器窗口大小时，或者在移动/平板电脑上从纵向切换到横向时，div仍然保持相同的宽度和高度。我必须重新加载页面以使div调整为新的视区大小。
我试着查看示例站点的代码，但最终我更加困惑。我还尝试了我在这里找到的其他几个建议，但到目前为止都没有对我起作用。
如果有人能帮我的话我将不胜感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-22 07:51:11
谢谢你的建议。看一看，这就是我最终要做的事情(它是有效的)：
HTML
<body id="container">
<div id="intro">
Content that will occupy the whole viewport
</div>
</body>CSS
#container {height: 100%;}
#container #intro {height: 100%;}
#intro {width: 100%;overflow: hidden;}这对我很管用。希望它能帮助其他人=)
Stack Overflow用户
发布于 2013-04-21 12:58:16
我认为你应该使用CSS Media Queries或者jQuery手机的orientationchange事件来帮你完成这项工作。
你可以通过jQuery手机的插件来使用orientationchange，添加以下脚本：
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">
</script>并更新到此脚本：
$(window).on('resize, orientationchange', function(){
$("#intro").height($(window).height());
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16128035
复制相关文章
相似问题
腾讯云开发者
