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

我在我的应用程序中有一个意想不到的横条。这是由于我的申请权的一个小差距（左侧是正确的，没有差距）。元素是否可以超出<html>的计算大小？

这是一个常见问题，并且有很多关于原因的讨论（一些元素（可能不可见）延伸到预期区域之外）以及如何解决这个问题（值得注意的是overflow: hidden）。

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

我检查的<html>与铬DevTools和我看到的间隙是其（html的）的外部区域（蓝色突出显示对应于DevTools选择<html>宽度：

是否有可能延伸到以外的区域<html>？（我在此突出显示这里计算的，而不是声明）

然后我去测量浏览器的宽度。其值（从边到边，即右边的黄色箭头，包括间隙）与DevTools提供的计算值<html>相同。

使用overflow: hidden时，滚动条消失，但间隙保持不变（具有与上述相同的测量值）。

我不知道这个差距的原因是什么。由于overflow: hidden修复了滚动条，一切都指向一个溢出元素 - 但是它应该在的<html>

的设计是基于引导和body最终宽度寄存器定义为：

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

来源

2017-09-07 WoJ

你使用固定宽度吗？例如，'width：1000px;'，如果是的话那么这可能是问题 –

@OvidiuUnguru：不，我没有设置宽度 – WoJ

@OvidiuUnguru：但无论如何，这不会在DevTools中显示（计算宽度'html'）？ – WoJ

有你试图添加一个边距：0到身体？

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

来源

2017-09-07 10:18:12 dlac

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

回答

相关问题