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 ，如下所示：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: