极客观点
项目管理
HarmonyOS
我希望 container的div上面留20px给 header 下面留20px给 footer ，然后页面剩下的部分全部是container
右侧留20px给right，剩下的部分都是container，不要留空白
现在我虽然设置container的高度为100% ，但是还是会留下很大的空白，请问是什么原因造成这样的
怎么修改才能让空白消失。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div {
box-sizing: border-box;
}
.header {
height: 20px;
background: rgba(51,255,255,1);
}
.container {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
background: rgba(51,0,153,1);
height: 100%;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 50px;
background:rgba(204,0,51,1);
height: 100%
}
.footer {
height: 20px;
background: rgba(153,0,0,1);
}
</style>
</head>
<body>
<div>
<div class='header'></div>
<div class='container'>
<div class='list'>
</div>
<div class='right'>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
修改后的代码，还是会出现大片的空白
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html, body, div, p, ul, li, ol, dl, dt, dd, pre, code, table, tr, td, form, fieldset,
legend, button, input, textarea, h1, h2, h3, h4, h5, h6, hr, blockquote {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
html {
height: 100%;
}
.header {
height: 20px;
background: rgba(51,255,255,1);
}
.container {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
background: rgba(51,0,153,1);
height: 100%;
}
.container ul {
list-style: none;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 50px;
background:rgba(204,0,51,1);
height: 100%
}
.footer {
height: 20px;
background: rgba(153,0,0,1);
}
</style>
</head>
<body>
<div>
<div class='header'></div>
<div class='container'>
<div class='list'>
</div>
<div class='right'>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
height: 100% 是相对于父元素的，若父元素未设置高度，那么height: 100% 的实际高度为零。此处 container 的实际高度等于 0 + 40px （padding上下产生的高度）。
解决办法：可以用 100vh 代替 100%