Honestly believing I must be the first to encounter this problem after searching the web for quite a bit, I decided to present this issue to you.
问题
我面临的问题类似于页面底部的“空白”。它仅在移动设备上可见，我无法在桌面设备上复制该问题，但是在 chrome 上进入开发人员模式并访问我的网站，我可以看到问题。
在 chrome 中使用开发者模式并检查所有元素时，很明显“空白” 什么都没有。它不包含任何信息，而且似乎与任何元素无关。
然而，经过一番挖掘后发现，“空格” 仅在为元素赋予宽度后才会弹出。不仅仅是宽度，而是超过视口(viewport)的宽度。
引起我注意的另一件事是这个“空白”的高度与视口(viewport)高度相同。
我想完成什么
您可能想知道为什么我设置的宽度超过视口(viewport)，我这样做的原因是因为我正在尝试构建一个移动(仅限)网站，该网站使用水平滚 Action 为在不同内容之间分页的方式。
我的目标是仅使用 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> 中包含元标记对于视口(viewport):
<meta name="viewport" content="width=device-width, initial-scale=1">
有关实例，请查看 my JSFiddle .
编辑:
添加我的 chrome 开发者工具的一些屏幕截图以可视化问题。
在此处查看实际的网站内容，如您所见，一切都如预期的那样。
宽度为200vw高度是100vw .
请在此处查看捕获为“空格”的问题，如 OP 中所述。
请注意，空白区域拉伸(stretch)到 height: 100vh 高度的两倍在 css 样式中设置。宽度延伸到内容，width: 200vw .
Chrome 开发者工具在设备模式 (CTRL - SHIFT - M) 中的屏幕尺寸为 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
关于html - 为元素提供超过 100% 的宽度后，移动端 html 标签外页面底部的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35892573/