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;来放置缩小
一个盒子既可以是弹性容器，也可以是弹性元素

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

Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
小白都能看懂的实战教程手把手教你Python Web全栈开发(DAY 3)
小白都能看懂的实战教程手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统第三讲这是小白都能看懂的实战教程手把手教你Python Web全栈开发的 ...
小白都能看懂的实战教程手把手教你Python Web全栈开发(DAY 1)
小白都能看懂的实战教程手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统第一讲博主博客文章内容导航(实时更新) 更多优质文章推荐: 收藏!最详细的P ...
小白都能看得懂的教程一本教你如何在前端实现markdown编辑器
小白都能看得懂的教程一本教你如何在前端实现markdown编辑器大家好,我是亓官劼(qí guān jié ),在[亓官劼]公众号.CSDN.GitHub.B站.华为开发者论坛等平台分享一些技 ...
兄弟，用大白话告诉你小白都能看懂的Hadoop架构原理
本文来自:石杉的架构笔记目录一.前奏二.HDFS的NameNode架构原理一.前奏 Hadoop是目前大数据领域最主流的一套技术体系,包含了多种技术. 包括HDFS(分布式文件系统),YARN ...
9篇小白都能懂系列博客学完MySQL基础
博主经过三天的时间整理终于把MySOL基础部分内容总结成了这九篇博客,如果博主漏写了重点的基础部分的内容,或者说博主写的地方有错误还请CSDN的兄弟们提醒(这一点就比较重要了),由于博主的时间比较有限 ...
小白都能玩的算法day2-数量级、输入和输出
小白讲故事,每日都精彩. 今天小白要给大家带来什么故事呢?不,今天我们不讲故事.今天来学数学.~有趣什么是数量级什么鬼? 数量级? 头晕^V^^V^^V^ 数量级路人甲:噢~~,小白原来你要教我 ...
随机森林的特征是放回抽样么_机器学习超详细实践攻略(10)：随机森林算法详解及小白都能看懂的调参指南...
一.什么是随机森林前面我们已经介绍了决策树的基本原理和使用.但是决策树有一个很大的缺陷:因为决策树会非常细致地划分样本,如果决策树分得太多细致,会导致其在训练集上出现过拟合,而如果决策树粗略地划分样 ...
[免费专栏] Android安全之Android Xposed插件开发，小白都能看得懂的教程
也许每个人出生的时候都以为这世界都是为他一个人而存在的,当他发现自己错的时候,他便开始长大少走了弯路,也就错过了风景,无论如何,感谢经历 Android安全付费专栏长期更新,本篇最新内容请前往: [ ...

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

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

解决方法一

解决方法二(完美)

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

最新文章

热门文章