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

最新推荐文章于 2022-08-11 18:17:42 发布

javascriptFaker

最新推荐文章于 2022-08-11 18:17:42 发布

阅读量2.5k

点赞数 4

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/makerbeen/article/details/108107619

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

话不多说：

首先说明业务场景：我需要两个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

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯Css实现两个Div占满整屏高度

最初踩坑网上搜教程一堆什么乱七八糟的百分比之类的博客，浪费时间浪费精力话不多说：首先说明业务场景：我需要两个div占满整屏，上边这个div的高度已经确定，那么我需要实现下边这个div自适应充满下边空间。方法一：使用 calcheight:calc(100vh - 200px);(PS: 这个方法最常见，Css3的新计算属性)方法二：使用flex<!DOCTYPE html><html><head> <style typ.
复制链接

扫一扫

专栏目录