html 中关于添加doctype之后设置height：100%不起作用的问题

最新推荐文章于 2020-08-15 14:39:31 发布

CodeFamer_JAVA

最新推荐文章于 2020-08-15 14:39:31 发布

阅读量754

点赞数 3

本文链接：https://blog.csdn.net/bylxt/article/details/61982843

版权

<!Doctype html>
<html>
<head>
	<meta charset="utf-8"></meta>
<style type="text/css">
	#d1 {
		background-color:red;
		height:20%;
	}
	#d2 {
	float:left;
		background-color:green;
		height:80%;
		width:20%;
	}
	#d3 {
	float:right;
		background-color:gray;
		height:80%;
		width:80%;
	}
</style>
</head>
<body>
	<div id="d1">11111111</div>
	<div id="d2">11111</div>
	<div id="d3">1111111</div>
</body>
</html>

如图所示，css中设置了height高度为% 形式，但是并未生效，
解决办法
1：删除头部 docktype 标签
2：在css中添加 html，body {height：100%}

<!Doctype html>
<html>
<head>
	<meta charset="utf-8"></meta>
<style type="text/css">
	html,body {
		height:100%;/* 此处添加该该属性即可 */
		}
	#d1 {
		background-color:red;
		height:20%;
	}
	#d2 {
	float:left;
		background-color:green;
		height:80%;
		width:20%;
	}
	#d3 {
	float:right;
		background-color:gray;
		height:80%;
		width:80%;
	}
</style>
</head>
<body>
	<div id="d1">11111111</div>
	<div id="d2">11111</div>
	<div id="d3">1111111</div>
</body>
</html>