我做了一个简单的布局，包括包装器、页眉、主体、侧边栏和页脚。除包装器外，一切正常，包装器的高度未达到页脚元素。我尝试更改高值，尝试使用 clearfix 但根本没有任何变化，这是问题的图片(我将其四舍五入)
这是代码:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrapper {
width: 1000px;
height: 100%;
margin: auto;
background-color: blue;
}
.header {
width: 100%;
height: 40px;
background-color: red;
}
.main {
width: 800px;
height: 100%;
margin-right: 20px;
background-color: yellow;
float: left;
}
.sidebar {
width: 180px;
height: 100%;
background-color: green;
float: left;
}
.footer {
width: 100%;
height: 40px;
background-color: purple;
}<!DOCTYPE html>
<html>
<head>
<title>Hello World !</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<meta charset='UTF-8' />
</head>
<body>
<div class='wrapper'>
<div class='header'>Header</div>
<div class='main'>Main</div>
<div class='sidebar'>Sidebar</div>
<div style='clear:both;'></div>
<div class='footer'>Footer</div>
</div>
</body>
</html>那么为什么 wrapper 的高度没有达到 footer 元素呢？以及如何克服它？
最佳答案
像素 (px) 被称为绝对单位，因为无论任何其他相关设置如何，它们的大小始终相同。百分比通常用于定义相对于元素父对象的大小。
这里的父元素由包装器类标识，主要是它的子类，占据了包装器的所有高度。所以要修改，将所有子类的高度设置为百分比。
关于html - 包装器未完全显示在页脚中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53789775/