当另一个DIV的宽度为100％时，为什么DIV不会在移动Chrome上占据整个屏幕宽度？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当另一个DIV的宽度为100％时，为什么DIV不会在移动Chrome上占据整个屏幕宽度？相关的知识，希望对你有一定的参考价值。
这是我的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上。
您的问题确实发生在桌面版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>以上是关于当另一个DIV的宽度为100％时，为什么DIV不会在移动Chrome上占据整个屏幕宽度？的主要内容，如果未能解决你的问题，请参考以下文章