html - 元素是否可以超出 <html> 的计算大小？

我的应用程序中有意外的水平条。这是由于我的应用程序右侧有一个小间隙(左侧是正确的，没有间隙)。

这是一个常见问题，关于原因(一些元素(可能不可见)延伸到预期区域之外)以及如何解决这个问题(特别是 overflow: hidden)有很多讨论。

但是我想找到有问题的元素而不是使用 hack(修复滚动条而不是间隙)。

我检查了 <html> 的宽度使用 Chrome DevTools，我看到的差距在其(html 的)区域之外(蓝色突出显示对应于 DevTools 中选择的 <html>:

元素是否有可能超出<html> 的计算区域？ ?(我在这里强调计算，而不是声明)

然后我去测量浏览器的宽度。它的值(从边到边，也就是右边的黄色箭头，包括间隙)与<html>的计算值相同。由 DevTools 提供。

使用 overflow: hidden 时滚动条消失了，但间隙仍然存在(与上面的测量值相同)。

我不知道造成这种差距的原因是什么。自 overflow: hidden修复了滚动条，所有内容都会指向一个溢出元素 - 但它应该在最终宽度 <html> 中注册

设计基于Bootstrap和body定义为:

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr auto;
    min-height: 100vh;
    overflow: hidden;
}

最佳答案

你试过给正文添加一个 margin: 0 吗？

还要检查是否有类似 normalize.css 的内容解决您的问题。

关于html - 元素是否可以超出 <html> 的计算大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46091268/