Question

如果我提供html元素width: 100%，则不会添加滚动条。但是，如果我提供body元素width: 100%，则会添加滚动条。这是代码：

<!DOCTYPE html>
<html>
<head>
<style>


    * {
         box-sizing: border-box;
    }
    html {      
      width: 100%;
     }
    .bodycontainer3 {
      width: 100%;
      border: 50px solid gray;
    }


</style>
</head>

<body>

    <div class="bodycontainer3">
        hello
    </div>
</body>
</html>

我的问题是，当主体宽度为100％时，为什么滚动条会添加到浏览器窗口？

Answer 1

默认情况下，html和body元素已经100％宽，因此无需将其设置为其他元素。

但是，body具有默认填充，应该在CSS重置过程中将其删除。

就此而言，div是块级别，默认情况下也是100％宽。

＆＃13;

* {
  box-sizing: border-box;
}
html {
  /* width: 100%; not required */
}
body {
  /* width:100% not required */
  margin: 0;
  padding: 0;
}
.bodycontainer3 {
  /* width:100% not required */
  border: 50px solid gray;
}

＆＃13;

<body>

  <div class="bodycontainer3">
    hello
  </div>
</body>

＆＃13;

当正文宽度为100％时，为什么会在浏览器窗口中添加滚动条？

1 个答案: