小编Ola*_*v A的帖子

老实说相信我必须是第一个在搜索网页后遇到这个问题的人,我决定向你提出这个问题.

问题

我所面临的问题类似于生活在我页面底部的"空白区域".它只能在移动设备上看到,我无法在桌面上复制这个问题,但是在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样式中设置的高度的两倍.宽度拉伸到内容, …