当另一个DIV的宽度为100％时，为什么DIV不会在移动Chrome上占据整个屏幕宽度？

Question

这是我的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不覆盖页面的整个宽度。

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

我的问题是，为什么只有移动设备上的Chrome才会出现此问题，而桌面上的Chrome浏览器上却没有这个问题？

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

Answer 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个像素将包含您添加的任何边框或填充，并且内容框将缩小以吸收该额外宽度。这通常使元素的大小更容易。

当另一个DIV的宽度为100％时，为什么DIV不会在移动Chrome上占据整个屏幕宽度？

问题描述投票：1回答：1

1个回答

最新问题

当另一个DIV的宽度为100％时，为什么DIV不会在移动Chrome上占据整个屏幕宽度？

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1