浏览器调整大小后出现空白间隙

Question

在我的当前项目中，我正在构建网站的平板电脑和移动版本，并在不同尺寸的浏览器中测试它，但是当我调整浏览器大小时，我遇到了一个问题。可以在以下链接找到该网站的当前版本：http://beta.residencyradio.com。

基本上，每当我调整浏览器以查看例如平板电脑上的外观时，就会呈现出右侧的空白区域并出现x滚动条，即使未超出包含元素的宽度。

我可以通过添加“overflow:hidden”来解决这个问题，但这将完全禁用x滚动，我不想要这种情况。

我已经在所有主要浏览器上进行了测试，所有浏览器的响应都相同，因此这必须与CSS有关，我不太确定具体是什么问题，但可能是我错过了某些很简单的东西。

非常感谢您的帮助！

谢谢，迈克尔

- Michael

---

很酷的网站，让我想起了http://www.adaptly.com。 - d-_-b

谢谢，伙计。我以前从没见过那个网站，看来我和他们的设计师想法一致！ - Michael

Answer 1

这个空白是因为你的#second div被推出了视口的边界而产生的。不要使用margin-left来推动该div，而是使用position:absolute;来解决这个问题。

现在的情况是这样的：

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

你可以使用这样的代码，它应该可以正常工作：

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

- Andres Ilich

---

确实是这样！不知道我怎么没发现！谢谢，伙计，你太棒了。 - Michael

Answer 2

我做了以下事情：

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

它移除了奇怪的空格，并允许在x方向上滚动。

- Con Antonakos

Answer 3

尝试过

html {
overflow-x:hidden;
}

没有起作用。但是...

body {
overflow-x:hidden;
}

完成了。

- ah2140

Answer 4

我认为...

在你的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%;
}

看起来当页面缩小时，那张带有酷炫渐变的图片似乎没有水平拉伸

就是这个吗？

- d-_-b

---

谢谢你的回复，伙计。不幸的是，这个方法并没有起作用 :( 它仍然在侧边呈现出白色空间，因此会出现x滚动条。某些东西正在呈现这个白色空间，我不知道是什么 :/ - Michael

Answer 5

我通常用以下方法来修复它：

 html {
  overflow-x:hidden;  
 }

它应该能够正常工作并隐藏空白处并重新调整网站

- Dragutescu Alexandru