html - 浏览器调整大小后出现空白

Question

在我当前的元素中，我正在构建网站的平板电脑和移动版本，并在浏览器中以不同的尺寸对其进行测试，尽管我在调整浏览器大小时遇到​​了问题。

可以在以下位置找到该站点的当前版本:http://beta.residencyradio.com

基本上，每当我调整浏览器的大小以检查它在平板电脑上的外观时，白色区域就会呈现在右侧并出现 x 滚动条，即使没有超过包含元素的宽度。

我几乎可以通过添加 overflow: hidden 来解决这个问题，但这会完全禁用 x 滚动，这是我不想要的。

我已经在所有主流浏览器上对此进行了测试，所有浏览器的响应都相同，所以它一定与 CSS 有关，我不太确定到底是什么，但它可能是我设法错过的非常简单的东西。

如有任何帮助，我们将不胜感激!

提前致谢，迈克尔

Answer 1

创建该空白是因为您的 #second div 被推到视口(viewport)边界之外。不要使用 margin-left 插入该 div，而是使用 position:absolute; 来解决这个问题。

现在是这样的:

#second .content {
    margin-left: 22.8125em;
}

.content div 的宽度为 60em。

您可以改用这样的东西，它应该可以正常工作:

#second .content {
    left: 170px; /* adjust to your liking */
    position: absolute;
    width: auto;
}