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.