Question

所以我有一个包含html，header，body，div标签等的网页。对于CSS，我有：

* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 98%;
  height: 98%;
  padding: 1%;
}

我的问题是浏览器右侧有一个滚动条。意思是身高太高了？

html设置为100%高度和宽度。 body有一个1%填充，可以添加1%顶部，右侧，底部和左侧，因此width - 2 = 98和height - 2 = 98。

填充1%高度98%和宽度98%。我如何获得滚动条？

Answer 1

它没有按预期工作，因为基于百分比的padding是相对于元素的宽度。如果您调整浏览器的大小以使高度大于宽度，您会注意到滚动条消失（这是因为padding相对于宽度）。

根据规范：

8 Box model - 8.4 Padding properties:

百分比是根据生成的框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

一种可能的解决方法是使用视口百分比单位（例如vw）以使百分比相对于宽度：

body {
    width: 98%;
    height: 98%;
    padding: 1vh 1vw;
}

您还可以添加box-sizing: border-box以在元素的维度中包含padding：

body {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
}

Answer 2

在CSS中，百分比边距和填充是相对于容器的宽度的，因为Josh Crozier在他的回答中已经解释过了。

我建议在<html>元素上设置百分比填充，文档的根目录加上box-sizing: border-box;，它会为您提供相等的空间。

border-box 此元素的宽度和高度（以及相应的最小/最大属性）的长度和百分比值决定了边框框的元素。也就是说，指定的任何填充或边框元素在这个指定的宽度内布局和绘制高度。内容宽度和高度通过减去边界和指定的相应边的填充宽度宽度和高度属性。 - W3C

＆＃13;

html {
  background: silver;
  box-sizing: border-box;
  height: 100%;
  padding: 5%;
}
body {
  background: pink;
  height: 100%;
  margin: 0;
}

＆＃13;

百分比填充不能正确累加总高度

2 个答案: