在给予元素超过100%的宽度之后,在移动设备上的html标签之外的页面底部的空白区域
老实说相信我必须是第一个在搜索网页后遇到这个问题的人,我决定向你提出这个问题.
问题
我所面临的问题类似于生活在我页面底部的"空白区域".它只能在移动设备上看到,我无法在桌面上复制这个问题,但是在Chrome上进入开发人员模式并访问我的网站,我可以看到问题所在.
当使用Chrome的开发模式,并检查所有的元素,很明显的是,"空白空间"是什么.它没有任何信息,它似乎与任何元素无关.
然而,经过一些挖掘后发现,只有在给元素赋予宽度后才会弹出"空白区域".而不仅仅是宽度,而是宽度超过视口.
引起我注意的其他事情是这个"空白空间"的高度与视口高度相同.
我想要完成什么？
您可能想知道为什么我设置宽度超过视口,我的理由是因为我正在尝试构建一个移动(仅)网站,该网站使用水平滚动作为在不同内容之间进行分页的方式.
我的目标是完全使用css3和html,没有jQuery,没有JavaScript,最好不是任何现成的插件.
到目前为止,"水平滚动"除了在页面底部提供了大量的空白空间外,还能给我带来理想的效果.我想花时间去试图"修复"而不是替换它.
重新创造这个问题
重新创建我的问题的最简单方法是从一个空白的html文件开始,并给它以下元素:
<div id="wrapper"> ... </div>
在包装内部放:
<div class="content"></div>
<div class="content"></div>
然后在你的css文件中放入以下样式:
body {
margin: 0; padding: 0;
}
#wrapper {
width: 200vw;
height: 100vh;
}
.content {
float: left;
width: 100vw;
height: 100vh;
}
并且不要忘记<head></head>在view-port中包含一个元标记:
<meta name="viewport" content="width=device-width, initial-scale=1">
有关实例,请查看我的JSFiddle.
编辑:
添加我的chrome开发人员工具的一些屏幕截图以可视化问题.
在这里看到实际的网站内容,因为你可以看到所有内容都是有意的.宽度200vw和高度是100vw.
请参阅此处将问题捕获为OP中描述的"空白区域".请注意,空白区域的长度height: 100vh是css样式中设置的高度的两倍.宽度拉伸到内容,width: 200vw.
设备modus(CTRL - SHIFT - M)中的Chrome开发人员工具屏幕尺寸为360x640(宽x高).
问题是当存在宽度 > 时100vw，会出现水平滚动条并从页面高度获取高度，因此会出现新的垂直滚动条并影响页面的高度
这是问题所在
所以解决办法就是给body宽度100%然后overflow-x:hidden然后就变成了
编辑 并在此处启用设备开发工具的新屏幕截图
body{
margin: 0;
padding: 0;
display: block;
width: 100%;
overflow-x: hidden;
}
#wrapper {
width: 200vw;
height: 100vh;
}
.content {
float: left;
width: 100vw;
height: 100vh;
background-color:#eee;
}<div id="wrapper">
<div class="content"></div>
<div class="content"></div>
</div>并更新了FIDDLE