css height 属性不适用于 body 元素答案

【问题标题】：css height property is not working for body elementcss height 属性不适用于 body 元素
【发布时间】：2020-06-17 17:03:13
【问题描述】：

这段代码运行良好

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html {
            width: 100%;
            height: 100%;
            background-color: red;
            margin: 0px;
            padding: 0px;
        }
        body {
        background-color: chartreuse;
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        }    
        </style>
    <title>Document</title>
</head>
<body>
</body>
</html>

但是当我尝试向身体的每一侧添加边距 5% 时，此代码不起作用.... 为什么会有垂直滚动条.... 高度 90% + 2 * 5% 边距 = 100% 高度但是有滚动条.... 我认为当身体高度为 100% 时不会出现任何滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html {
            width: 100%;
            height: 100%;
            background-color: red;
            margin: 0px;
            padding: 0px;
        }
        body {
        background-color: chartreuse;
        width: 90%;
        height: 90%;
        padding: 0px;
        margin: 5%;
        }    
        </style>
    <title>Document</title>
</head>
<body>
</body>
</html>

【问题讨论】：

这能回答你的问题吗？ Make body have 100% of the browser height
这背后的原因可能是因为当您尝试向所有边添加边距时，它也会将边距添加到顶部。因此，将黄色 div 向下推。
垂直边距（顶部和底部）实际上是相对于元素的宽度，而不是高度。所以 90% + (2 * 5%) 不一定等于 100%。相反，使用 vh 单位：codepen.io/3rror404/pen/GRoNyOE
我希望 body square 适合中心而不需要任何页面移动。宽度侧确实注意到移动，它工作正常，但垂直侧不起作用，它的移动..对于宽度侧（90% 主体 +2（5% 边距））=100%......但是对于高度（90% body +2(5%)) != 100 .....为什么会有差异。

标签： html css visual-studio-code

【解决方案1】：

试试这个。也许它会为你指明正确的方向

<style>
html, body {
  height: 100%; /* keep these full height to avoid push or pull */
  margin: 0; /* remove default margin on body */
}
body {
  background-color: red; /* your background color */
}
#page {
  width: 90vw; /* use 90/100 of view width */
  height: 90vh; /* use 90/100 of view height */
  /* top margin 5/100 of view height + auto margin on left/right */
  margin: 5vh auto 0 auto; 
  background-color: chartreuse; /* your background color */
}
</style>

<body>
  <div id="page">
    <!-- here your content in the #page container -->
  </div>
</body

【讨论】：

不是我，但Why isn't providing feedback mandatory on downvotes, and why are ideas suggesting such negatively received? 对此问题进行了解释。话虽如此，您在展示 CSS 时没有解释为什么它会有所帮助。
你的解释是对的，我在css中添加了内联的cmets。我同意你的观点，我可能不会要求赞成，但在某些情况下，像这个问题，我的回答和反对之间有 2 分钟或更短的时间。在尝试我的答案之前，感觉就已经存在反对意见了。

【解决方案2】：

为了实现第一种情况，您需要增加填充而不是边距，因为边距用于在元素周围创建空间，在任何定义的边界之外，这里空间是围绕 body 标签创建的，因此推动了 body 元素。现在要在红色上填充绿色背景，您需要使用填充，它在元素定义的内容周围的边界内创建空间，从而增加元素的高度和宽度。

填充属性可以有以下值：

长度以 cm、px、pt 等为单位。
元素的宽度百分比。

现在，当您分配 padding:5% 时，它将等于 body 元素宽度和高度的 5%，即 html 标签宽度和高度的 90% 的 5%，这就是您的数学错误的原因。我试过了一些值并得到你需要的东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{

            margin:0px;
            padding:0px;
        }
        html {
            width:100%;
            height:100%;
            background-color: red;
        }
        body {
        
        background-color: chartreuse;
        width:90%;
        height:90%;
        padding-right:5%;
        padding-left:5%;
        padding-top:2.3%;
        padding-bottom:2.3%;

        }    
        </style>
    <title>Document</title>
</head>
<body >
    
</body>
</html>

【讨论】：