设置body height:100%不起做用

时间 2019-11-10

标签设置 body height 100% 不起繁體版

原文原文链接

当设置一个页面元素的height为100%时，但愿这个页面的元素能充满整个视图窗口，但height:100%却没有起到做用，为何？css

这个跟浏览器计算宽高度有关，web浏览器在计算宽度是会考虑打开窗口的宽度，若是你不给宽度设置任何值，那么内容就会平铺宽度。在高度方面，浏览器不会去计算内容的高度，除非内容超出了屏幕的高度(出现滚动条的状况)，因此说，获取不到父元素的高度，也就没有办法去计算自身的高度(由于高度是按照百分比的，百分比参照的对象是父元素)，因此高度设置成百分比也就不起做用。要想解决，直接在html，body元素上都设置上height:100%;父元素有了高度，就有了参照，再设置其余元素的百分比的高度就会有效html

如下上对比图web

代码：没有给html设置高度height:100%浏览器

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		body{
			width: 100%;
			height: 100%;
			background-image: url('1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
	
</body>
</html>

效果图：url

代码：给html设置了height:100%code

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		html{
			height: 100%;
		}
		body{
			width: 100%;
			height: 100%;
			background-image: url('1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
	
</body>
</html>

效果图：htm

这样就撑开了对象

完it