纯Css实现两个Div占满整屏高度

2024年3月10日 175次阅读 来源: javascriptFaker

最初踩坑网上搜教程一堆什么乱七八糟的百分比之类的博客，浪费时间浪费精力

话不多说：

首先说明业务场景：我需要两个div占满整屏，上边这个div的高度已经确定，那么我需要实现下边这个div自适应充满下边空间。

方法一： 使用 calc

height:calc(100vh - 200px);

(PS: 这个方法最常见，Css3的新计算属性)

 

方法二： 使用flex

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		*{
			margin: 0px;
		}
		.parent{
			display: flex;
		  	flex-flow: column;
		  	height:100vh;
		}
		.box1{
			width: 100%;
			height: 200px;
			position: relative;
			background-color: red;
		}
		.box2{
			flex: 1;
			position: relative;
			background-color: blue; 
		}
	</style>
	<title></title>
</head>
<body>
	<div class="parent">
		<div class="box1"></div>
		<div class="box2"/>
	</div>
</body>
</html>

(PS：既然flex可以横向自适应，自然也可以纵向，算一个奇淫巧技吧 )

    原文作者：javascriptFaker
    原文地址: https://blog.csdn.net/makerbeen/article/details/108107619
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞