css - 当 body 宽度超过 100% 时，如何让元素占满整个宽度？

Question

由于 Bootstrap 响应能力，这对大多数浏览器都适用。但我正在检查旧版浏览器并发现了这一点。

看起来宽元素正在推出 body 。好的，但为什么导航栏没有占据整个宽度？

fiddle . “jsfiddle 的链接必须附有代码”:

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="/">The Navbar</a>
 </nav>
 <div></div>
body {
  background-color: red;
}
div {
  display: inline-block;
  height: 20px;
  background-color:green;
  width: 3000px;
}

Answer 1

简单的答案是因为 body 最大宽度默认限制为 100% 的视口(viewport)。

width:100% 是视口(viewport)或显示设备的最大宽度。在这种情况下，该 div 的宽度 3000px 远远超出了视口(viewport)限制。因此 100% 是行不通的。您可以为导航栏显式定义 3000px。

但是如果您为主体定义宽度 3000px，那么 Navbar 也会扩展到相同的宽度。 check this fiddle

body {
  background-color: red;
  width:3000px;
}