当另一个 DIV 具有 100% 宽度时，为什么 DIV 不会占据移动 Chrome 上的整个屏幕宽度？
[英]Why does DIV not occupy entire width of screen on mobile Chrome when another DIV has 100% width?
问题描述
Here is my HTML code.
这是我的 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>
Here is the output I see when I view the page with an Android mobile device with Chrome browser.这是我使用带有 Chrome 浏览器的 Android 移动设备查看页面时看到的输出。
The issue here is that the orange div does not cover the whole width of the page.这里的问题是橙色div没有覆盖页面的整个宽度。
My question is not how to fix it.我的问题不是如何解决它。 I know how to fix it.我知道如何修复它。 If I remove width: 100% from .b , it fixes this issue.如果我从.b删除width: 100% ，它会解决这个问题。
My question is about why this issue occurs only with Chrome on a mobile device but not on any other browser or not on Chrome on Desktop?我的问题是为什么此问题仅在移动设备上的 Chrome 上出现，而在任何其他浏览器上或桌面上的 Chrome 上都没有？
The related question at Why does my navigation div not extend to the full width of the screen on mobile devices?为什么我的导航 div 没有扩展到移动设备上的整个屏幕宽度？ does not answer my question because none of the answer there discusses the CSS or user agent rules that causes this issue.没有回答我的问题，因为那里的答案都没有讨论导致此问题的 CSS 或用户代理规则。 More importantly I am trying to understand why this issue occurs only on Chrome on a mobile device.更重要的是，我试图理解为什么这个问题只发生在移动设备上的 Chrome 上。
1 个解决方案
解决方案1
1 已采纳 2018-03-02 01:46:15
Your issue does indeed occur on Chrome on desktop, and is not restricted to just mobiles.您的问题确实发生在桌面版 Chrome 上，并且不仅限于手机。
As for the cause of your problem, it's to do with the box model :至于你的问题的原因，这与box model ：
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box.
In order to ensure that your .b element is constrained within the width of the container is to apply box-sizing: border-box it, as is seen in the following:为了确保您的.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 tells the browser to account for any border and padding in the values you specify for width and height. box-sizing: border-box告诉浏览器在您为宽度和高度指定的值中考虑任何边框和填充。 If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.如果您将元素的宽度设置为 100 像素，那么这 100 像素将包括您添加的任何边框或内边距，并且内容框将缩小以吸收额外的宽度。 This typically makes it much easier to size elements.这通常使得调整元素大小变得更加容易。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.