Html css高度属性不适用于body元素_Html_Css_Visual Studio Code

Html css高度属性不适用于body元素

html css visual-studio-code

Html css高度属性不适用于body元素,html,css,visual-studio-code,Html,Css,Visual Studio Code,这个代码运行良好 <!DOCTYPE html> <html lang="en"> <head> <style> html { width: 100%; height: 100%; background-color: red; margin: 0px; padding: 0px; }

这个代码运行良好

<!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>


html{
宽度：100%；
身高：100%；
背景色：红色；
边际：0px；
填充：0px；
}
身体{
背景色：黄绿色；
宽度：100%；
身高：100%；
填充：0px；
边际：0px；
}    
文件

但当我试图在身体两侧增加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>


html{
宽度：100%；
身高：100%；
背景色：红色；
边际：0px；
填充：0px；
}
身体{
背景色：黄绿色；
宽度：90%；
身高：90%；
填充：0px；
利润率：5%；
}    
文件

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

<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


html，正文{
高度：100%；/*保持这些高度以避免推拉*/
边距：0；/*删除正文上的默认边距*/
}
身体{
背景色：红色；/*您的背景色*/
}
#页面{
宽度：90vw；/*使用视图宽度的90/100*/
高度：90vh；/*使用视图高度的90/100*/
/*上边距视图高度的5/100+左/右自动边距*/
保证金：5vh自动0自动；
背景色：黄绿色；/*您的背景色*/
}
为了实现第一种情况，您需要增加填充，而不是边距，因为边距用于在元素周围创建空间，在任何定义的边界之外，这里在主体标记周围创建空间，按下body元素。现在，要将绿色背景填充到红色背景上，您需要使用填充，在元素定义的边框内围绕内容创建空间，从而增加元素的高度和宽度
填充属性可以具有以下值：
以厘米、像素、磅等为单位的长度
元素的宽度%
现在，当您指定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>


*{
边际：0px；
填充：0px；
}
html{
宽度：100%；
身高：100%；
背景色：红色；
}
身体{
背景色：黄绿色；
宽度：90%；
身高：90%；
右：5%；
左：5%；
垫面：2.3%；
垫底：2.3%；
}    
文件
这是否回答了您的问题？这背后的原因可能是，当您尝试向所有边添加边距时，它也会将边距添加到顶部。因此，向下推黄色div。垂直边距（顶部和底部）实际上是相对于元素的宽度，而不是高度。所以90%+（2*5%）不一定等于100%。取而代之的是，使用vh单位：我希望身体正方形能够在没有任何页面移动的情况下适合中间。宽度侧的音符移动，但垂直侧不起作用，其移动..宽度侧（90%正文+2（5%边距））=100%…但高度侧（90%正文+2（5%））！=100.…为什么会有不同。不是我，但有关于这方面问题的解释。话虽如此，您在提交CSS时没有解释为什么它会有帮助。您的解释是对的，我在CSS中添加了内联注释。我同意你的看法，我可能不会要求进行赞成票，但在某些情况下，像这个问题，我的回答和反对票之间的间隔不超过2分钟。我觉得在尝试我的答案之前，否决票已经存在了。