body宽度设置为100%，为啥还有横向滚动条？

问题现象:

这是一个非常简单的例子，创建一个html文件，设置body的宽度为100%，然后在浏览器中打开，发现有横向滚动条。为什么呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        width: 100%;
      }
    </style>
  </head>
  <body>
    This is body
  </body>
</html>

原因分析：

这是因为浏览器自动为body元素添加了margin, 默认情况下，横向和纵向的margin都是8px，所以body的实际宽度是：100% + 8px + 8px，这已经超出父元素16px了，所以肯定会出现横向滚动条。

解决办法：

知道了原因就好解决了，解决的方法就是将margin排除在外：

方法一：删除浏览器默认的margin（推荐）

1
2
3

body {
  margin: 0;
}

方法二：动态计算body的宽度

这个方法是在计算body宽度时，减去左右两侧的margin。

1
2
3

body {
  width: calc(100% - 16px);
}

注意：如果删除掉body里面的内容，则不会出现横向滚动条，这是因为浏览器在处理空元素时，可能会进行某些优化，所以不会出现横向滚动条。

20% + 80%不等于100%？

问题描述

看下面这个典型的两列布局，左侧菜单栏宽度为20%，右侧内容区宽度为80%，按说它们的总宽度是100%，正好填满一行，但实际情况确产生了换行，这说明总宽度超过了100%，为什么呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .aside {
        float: left;
        width: 20%;
        margin-right: 8px;
        background-color: #898c89;
      }

      .content {
        float: left;
        width: 80%;
        background-color: #bf00ff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <aside class="aside">menu</aside>
      <main class="content">content</main>
    </div>
  </body>
</html>

原因分析

可以看到，这是一个典型的两列布局，用的是float布局，注意：使用float做布局在现代CSS中已经不推荐了，如果要做两列布局，更好的方式是使用flex或grid布局，这里用float仅作实例之用。float在现代CSS中最重要的作用就剩下文字环绕了，除此之外不推荐使用float。

但是坏就坏在第一个div中有一个margin-right: 8px;，这个margin是会被计算在内的，所以实际宽度为20% + 80% + 8px > 100%，所以会出现换行。

解决办法

方法一：删除margin

解决办法很简单，我们可以将8px的margin去掉。下面的CSS代码从右侧内容区域减去8px的margin。这样总宽度还是100%，就不会出现换行了。

.content {
  float: left;
  width: calc(80% - 8px); /* 这里减去8px */
  background-color: #bf00ff;
}

方法二：使用flex布局（推荐）

上面提到过，float布局已经不推荐了，使用flex布局更好。下面是使用flex布局的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .container {
        display: flex;
      }

      .aside {
        flex: 1;
        background-color: #898c89;
      }

      .content {
        flex: 4;
        background-color: #bf00ff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <aside class="aside">menu</aside>
      <main class="content">content</main>
    </div>
  </body>
</html>

Philip

css-troubleshooting