小白都能做到的使用css如何让一个盒子沾满剩余的空间

css如何让一个盒子沾满剩余的空间

---

前提

html

<div class="app">
	<div class="header"></div>
	<div class="content"></div>
	</div>
</div>

css

*{
	margin: 0;
	padding: 0;
}
html,body{
	height: 100%;
}
.app{
	width: 100%;
	height: 100%;
}
.header{
	height: 40px;
	background-color: red;
}

问题

• 让content铺满剩余的空间

解决方法一

---

• 利用定位脱离文档流，然后扯开盒子的大小

css

.content{
	position: absolute;
	top: 40px;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
}

• 但是这样有一个缺点就是，当有内容超出盒子的时候，他会出现滚动条，并且背景色不再是黑色，还导致了父元素塌陷问题

<div class="content">
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<font size="40px" color="red">font</font>
</div>

• 如果想要解决的话只能在html或者body中加上背景色(视口)，但这不是我们想要的

解决方法二(完美)

---

• 使用flex伸缩盒解决

.app {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.header {
	height: 40px;
	background-color: red ;
	flex-shrink: 0;
}

.content {
	flex: 1;
	background-color: #000;
}

• 需要注意的是，让一个盒子进行自动伸展，当屏幕空间不够的时候，他会将固定宽度挤掉，我们需要使用flex-shrink: 0;来放置缩小
• 一个盒子既可以是弹性容器，也可以是弹性元素