浏览器调整大小后出现空白区域

Question

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

该网站的当前版本位于：http://beta.residencyradio.com

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

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

我已经在所有主流浏览器中对此进行了测试，所有浏览器的响应都是一样的，所以它必须与CSS有关，究竟我不太确定，但它可能非常简单，我已经设法错过了。

非常感谢任何帮助！

先谢谢，迈克尔

Answer 1

正在创建空白，因为您的#second div被推到视口的边界之外。不要使用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;
}

Answer 2

我想......

更改css文件：

从：

html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}

到

html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
    background-size:100% 100%;
}

当页面缩小时，看起来图像（带有冷色调）不会水平拉伸

这是吗？

Answer 3

我做了以下事情：

html, body {
    width: 100%;
    display: table;
}

它删除了奇怪的whites间距，同时也允许在x方向上滚动。

Answer 4

我通常用

修复它

 html {
  overflow-x:hidden;  
 }

它应该工作并隐藏空白区域并重新缩放网站

Answer 5

尝试

html {
overflow-x:hidden;
}

没有用。但是..

body {
overflow-x:hidden;
}

没有。