用calc计算元素宽度时为什么会出现滚动条？

夏侯毅蒙提问于 2026-02-17 10:25:25 阅读 18

移动

我在移动端布局时用calc设置容器宽度为calc(100% – 40px)，但页面底部总出现横向滚动条，调整数值也不行。明明计算后的宽度应该刚好适应屏幕啊？

.container {
  width: calc(100% - 40px);
  padding: 20px;
  box-sizing: border-box;
}

检查过padding和border都没有问题，父元素宽度是100%。是不是calc在移动端有特殊限制？或者哪里漏掉了计算项？

我来解答赞 2 收藏

反馈

1 条解答

Mc.慧玲 Lv1

这个问题大概率是由于你忽略了页面默认的margin导致的。先检查一下html和body元素，它们默认会带有一些浏览器自带的margin值，一般是8px左右。这个margin会叠加到你的布局中，导致总宽度超出视口宽度，出现滚动条。

解决办法很简单，把html和body的margin都设为0就行了。像这样：

html, body {

  margin: 0;

  padding: 0;

}

另外，虽然你已经用了box-sizing:border-box，但还是建议确认下是不是全局设置的。最好在样式开头加上这段代码，确保所有元素都使用border-box计算盒模型：

* {

  box-sizing: border-box;

}

最后再啰嗦一句，移动端开发记得加上viewport的meta标签，不然页面缩放也会导致一些意想不到的问题。别问我怎么知道的，踩过太多坑了。

做完这些调整应该就没问题了。如果还有滚动条，那就是其他地方有溢出元素了，得具体排查。

2026-02-17 11:04