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

Question

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

该网站的当前版本可在以下网址找到： http: //beta.residencyradio.com

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

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

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

任何帮助将不胜感激！

在此先感谢，迈克尔

score 1 · Accepted Answer

正在创建该空白是因为您的#seconddiv 被推到视口边界之外。与其使用 div 推送该 div，不如使用margin-left它position:absolute;来解决该问题。

现在是这样的：

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

div的.content宽度是60em原样。

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

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

score 0 · Accepted Answer

我认为....

更改您的 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%;
}

当页面缩小时，看起来该图像（带有凉爽的渐变）没有水平拉伸

是这个吗？

score 0 · Accepted Answer

我通常用

 html {
  overflow-x:hidden;  
 }

它应该可以工作并隐藏空白并重新调整站点

score 0 · Accepted Answer

我做了以下事情：

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

它消除了奇怪的空白，同时还允许在 x 方向上滚动。

score 0 · Accepted Answer

0

试过了

html {
overflow-x:hidden;
}

没用。但..

body {
overflow-x:hidden;
}

做过。

于 2019-06-04T02:04:53.410 回答

5 回答 5