css 高度属性不适用于主体元素
[英]css height property is not working for body element
问题描述
此代码工作正常
<!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>
2 个解决方案
解决方案1
1 2020-06-17 17:36:23
尝试这个。 也许它会为你指明正确的方向
<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
解决方案2
0 2020-09-13 15:54:03
为了实现第一种情况，您需要增加填充而不是边距，因为边距用于在元素周围创建空间，在任何定义的边界之外，这里空间是围绕 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>
CSS 100％高度不起作用，但身体是100％高度？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.