当另一个 DIV 具有 100% 宽度时，为什么 DIV 不占据移动 Chrome 上的整个屏幕宽度？答案

【问题标题】：Why does DIV not occupy entire width of screen on mobile Chrome when another DIV has 100% width?当另一个 DIV 具有 100% 宽度时，为什么 DIV 不占据移动 Chrome 上的整个屏幕宽度？
【发布时间】：2018-03-02 09:46:15
【问题描述】：

这是我的 HTML 代码。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width">
<style>
body {
    margin: 0;
}

.a {
    background: orange;
    border: 2px solid black;
}

.b {
    padding: 0 2em;
    width: 100%;
    background: lightblue;
    border: 2px solid black;
}
</style>
</head>
<body>

<div class="a">Foo</div>
<div class="b">Bar</div>
</body>
</html>

这是我使用带有 Chrome 浏览器的 Android 移动设备查看页面时看到的输出。

这里的问题是橙色div 没有覆盖页面的整个宽度。

我的问题不是如何解决它。我知道如何解决它。如果我从.b 中删除width: 100%，它可以解决这个问题。

我的问题是为什么这个问题只出现在移动设备上的 Chrome 而不是任何其他浏览器或桌面版 Chrome 上？

Why does my navigation div not extend to the full width of the screen on mobile devices? 的相关问题没有回答我的问题，因为那里的答案都没有讨论导致此问题的 CSS 或用户代理规则。更重要的是，我试图理解为什么这个问题只发生在移动设备上的 Chrome 上。

【问题讨论】：

标签： html css google-chrome mobile

【解决方案1】：

您的问题确实发生在桌面版 Chrome 上，而且不仅限于手机。

至于你的问题原因，和box model有关：

默认情况下，在 CSS 框模型中，您分配给元素的宽度和高度仅应用于元素的内容框。如果元素有任何边框或填充，然后将其添加到宽度和高度，以达到在屏幕上呈现的框的大小。这意味着当您设置宽度和高度时，您必须调整您提供的值以允许可能添加的任何边框或填充。

为了确保您的 .b 元素被限制在容器的宽度内，请应用 box-sizing: border-box 它，如下所示：

body {
  margin: 0;
}

.a {
  background: orange;
  border: 2px solid black;
}

.b {
  padding: 0 2em;
  width: 100%;
  background: lightblue;
  border: 2px solid black;
  box-sizing: border-box;
}

<body>
  <div class="a">Foo</div>
  <div class="b">Bar</div>
</body>

box-sizing: border-box 告诉浏览器在您为宽度和高度指定的值中考虑任何边框和填充。如果您将元素的宽度设置为 100 像素，那么这 100 像素将包含您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常可以更轻松地调整元素的大小。

【讨论】：