Question

我做了一个简单的布局，包括包装，标题，主，侧边栏和页脚。除包装器外，其他所有东西都正常工作，包装器的高度未达到页脚元素。我尝试更改高值，尝试使用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>

那为什么包装纸的高度不能达到页脚元素呢？以及如何克服它？

Answer 1

因为您将.header和.footer高度设置为40px，同时将.main和.sidebar高度设置为100％，这导致了问题。因此，与其给.header和.footer height 40px分配值，不如像.header height 10％和.footer height 10％以及.main和.sidebar height都提供百分比值，所以总高度为100％，这样就可以解决问题。

* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	width: 1000px;
	height: 100%;
	margin: auto;
	background-color: blue;
}
.header {
	width: 100%;
	height: 10%;
	background-color: red;
}
.main {
	width: 800px;
	height: 80%;
	margin-right: 20px;
	background-color: yellow;
	float: left;
}
.sidebar {
	width: 180px;
	height: 80%;
	background-color: green;
	float: left;
}
.footer {
	width: 100%;
	height: 10%;
	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>

Answer 2

像素（px）称为绝对单位，因为无论其他任何相关设置，它们始终具有相同的大小。该百分比通常用于定义相对于元素父对象的大小。

此处，父元素由包装器类标识，而主要元素是其子类，占用了所有包装器高度。因此，要进行修改，请将所有子类的高度都设置为百分比。

包装纸未完全显示在页脚上

2 个答案: