WEB开发技能树-CSS-height 100%

1 需求

CSS让height100%生效的解决方案

方案一：所有父节点高度都需要设置为100%

方案二：删除

注意事项：切记，一定是所有父节点都要设置为100%

2 语法

3.1 示例：body的height为100%

错误实现：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
			body {
				border: 1px black solid;
				height: 100%;
			}
		</style>
	</head>
	<body>
		123
	</body>
</html>

正确实现1：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
			html {
				height: 100%;
			}
 
			body {
				border: 1px black solid;
				height: 100%;
			}
		</style>
	</head>
	<body>
		123
	</body>
</html>

正确实现2：


<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
			body {
				border: 1px black solid;
				height: 100%;
			}
		</style>
	</head>
	<body>
		123
	</body>
</html>

正确实现3：


<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
			body {
				border: 1px black solid;
				height: 100%;
			}
		</style>
	</head>
	<body>
		123
	</body>
</html>

3.2 示例：

错误实现


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
/* 			html {
				height: 100%;
			} */
 
			body {
				/* border: 1px black solid; */
				height: 100%;
			}
 
			#container {
				/* border: 1px black solid; */
				text-align: center;
				/* height: 100%; */
			}
 
			#header {
				/* border: 1px black solid; */
				background-color: lightblue;
				height: 5%;
			}
 
			#menu {
				/* border: 1px black solid; */
				background-color: aliceblue;
				float: left;
				height: 90%;
				width: 15%;
			}
 
			#content {
				/* border: 1px black solid; */
				float: left;
				height: 90%;
				width: 85%;
 
			}
 
			#footer {
				/* border: 1px black solid; */
				background-color: lightblue;
				clear: both;
				height: 90%;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">header</div>
			<div id="menu">menu</div>
			<div id="content">content</div>
			<div id="footer">footer</div>
		</div>
	</body>
</html>

正确实现


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style>
			html {
				height: 100%;
			}
 
			body {
				/* border: 1px black solid; */
				height: 100%;
			}
 
			#container {
				/* border: 1px black solid; */
				text-align: center;
				height: 100%;
			}
 
			#header {
				/* border: 1px black solid; */
				background-color: lightblue;
				height: 5%;
			}
 
			#menu {
				/* border: 1px black solid; */
				background-color: aliceblue;
				float: left;
				height: 90%;
				width: 15%;
			}
 
			#content {
				/* border: 1px black solid; */
				float: left;
				height: 90%;
				width: 85%;
 
			}
 
			#footer {
				/* border: 1px black solid; */
				background-color: lightblue;
				clear: both;
				height: 90%;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">header</div>
			<div id="menu">menu</div>
			<div id="content">content</div>
			<div id="footer">footer</div>
		</div>
	</body>
</html>

4 参考资料

css如何让height:100%起作用？_shanql的博客-CSDN博客

设置百分比高度的问题_Young_Gao的博客-CSDN博客

css如何让height:100%起作用？_shanql的博客-CSDN博客

相关阅读:
行业分析| 调度行业未来趋势
vue.use和vue.prototype的区别
LoRa模块空中唤醒功能原理和物联网应用
【开源】JAVA+Vue.js实现天沐瑜伽馆管理系统
【每日一题】补档 ABC309F - Box in Box | 三维偏序 | 树状数组 | 中等
[激光原理与应用-38]：《光电检测技术-5》- 光学测量基础 - 光调制
Minecraft 1.18.1、1.18.2模组开发 16.种植作物(crop)
C++各知识点参考资料汇总（不定期更新）
JavaWeb实现登录注册功能[代码+详解]
百度飞桨(PaddlePaddle) - PP-OCRv3 文字检测识别系统预测部署简介与总览

原文地址：https://blog.csdn.net/pwp032984/article/details/128191993