【问题标题】:Gap on the right of the screen on mobile view移动视图屏幕右侧的间隙
【发布时间】:2018-04-24 23:10:32
【问题描述】:

我正在构建一个网站,但我在正确的屏幕尺寸上有一个奇怪的间隙。

这种差距只出现在移动视图和纵向视图(横向一切似乎都可以)。 body 和 html 的宽度设置为 100%,margin 和 padding 设置为 0。我发现 body 的实际宽度应该是 105vw,但对于所有设备都是这样吗?

有什么办法可以清楚的解决吗?

网站:http://valkovic.eu:8080/JanWilliamDrnek/

【问题讨论】:

  • 请访问help center,使用tour查看内容和How to Ask。做一些研究,搜索关于 SO 的相关主题;如果您遇到困难,请发布您尝试的minimal reproducible example,并注明输入和预期输出。我们不希望链接到会发生变化的网站 - 特别是如果您解决了问题
  • 参考网站未加载:(

标签: html css width


【解决方案1】:

第一次我可以重现,但第二次不行,也许你正在调整,就像我看的那样。

标志似乎在身体上方突出

.title img { margin: 2em auto;} 在 css 中为我解决了这个问题。

不确定 105vw,除非您试图在屏幕外隐藏某些内容,否则最大值应为 100vw。

【讨论】:

  • 谢谢,图像边距是问题所在。虽然我不知道,为什么图像的宽度会影响页面的宽度,但没关系:D.
  • 您可以在您不想展开的父元素上使用 css 属性 [overflow: hidden;] 阻止父元素/主体展开。现在有了这个属性,如果内部元素对于它的容器来说太大了,溢出的部分将被隐藏。 :)