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

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

将html被设置为100%高度和宽度.该body有一个1%填充它增加了1%顶部,右,下,左,所以这是width - 2 = 98和height - 2 = 98.

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

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

根据规格:

8箱型号 - 8.4填充属性:

百分比是根据生成的框的包含块的宽度计算的,即使对于"填充顶部"和"填充底部"也是如此.如果包含块的宽度取决于此元素,则在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;
}