html 让块高度百分比(height:100%)生效的2种方法

前端 · 2019-04-08 ·

核心原理:
height:100% 这个百分比是子节点相对于父容器而言;所以生效的条件就是:父容器必须具有明确的高度信息。

方法一:

给根元素到子容器都设置百分比高度,这样从根元素Html开始,到子div结束,全部都具有百分比高度,这样,就都能够获取到高度信息;

<!DOCTYPE html>
<html lang="en" style="height:100%;padding:0;margin: 0;">
	<head>
		<meta charset="UTF-8">
		<title>html 让块高度百分比(height:100%) 生效的2种方法</title>
	</head>
	<body style="height:100%;padding:0;margin:0;">
		<div class="c" style="height:100%;padding:0;margin:0;">

		</div>
	</body>
</html>

方法二:

通过JS控制body的高度,进而使其中的div全屏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>html 让块高度百分比(height:100%) 生效的2种方法</title>
	</head>
	<body id="body" style="padding:0;margin: 0;">
        <div style="height:100%;width:100%;background-color:#000" >
        
        </div>
	</body>
	<script type="text/javascript">
		var screenHeight=document.documentElement.clientHeight;
		var screenWidth=document.documentElement.clientWidth;
		var body=document.getElementById('body');
		body.style.width=screenWidth+"px";
		body.style.height=screenHeight+"px";
	</script>
</html>
%