超强-1个div固定铺满全屏

原创于 2020-09-07 10:36:16 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

232 篇文章

订阅专栏

本文介绍如何利用CSS让1个div完美填充浏览器的整个屏幕，实现全屏显示的效果，适用于网页设计和前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们现在要实现1个div
铺满当前界面全部

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>超强-上下两个div上面值固定下面铺满高度</title>
	<style type="text/css">
	 
		* {
			margin: 0;
			padding: 0;
		}

		.parentDiv {
			width: 100%;
			height: 100%; 
			position: absolute;
			display: flex;
			flex-direction: column; 
		} 
		/*.childDiv1 {
			background-color: blue;
			width: 100%;
			height: 200px;
		}*/

		.childDiv2 {
			background-color: red;
			width: 100%;
			flex: 1;
		}
	</style>
</head>

<body>
	<div class="parentDiv">
		<!-- <div class="childDiv1">1111</div> -->
		<div class="childDiv2">
	 2222 
		</div>
	</div>
</body>

</html>