小白都能做到的使用css如何让一个盒子沾满剩余的空间
CSS 如何 一个 空间 小白 做到 盒子 剩余
2023-09-11 14:19:18 时间
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>
- 如果想要解决的话只能在
htm
l或者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动画基础知识
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 盒子端 CSS 动画性能提升研究
- 【Css】css中class之间>(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解(转载,笔记用)
- CSS编写指导规范和建议
- [转]CSS如何设置html table表格边框样式
- 最全CSS各种布局详解
- css多种方式实现等宽布局
- 如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形
- 如何用纯 CSS 创作一个菜单反色填充特效
- css CSS常见布局解决方案
- 浅谈html引入css的几种方式
- 《HTML与CSS入门经典(第8版)》——1.6 总结
- 如何使用CSS隐藏滚动条并且兼容大部分浏览器
- 好玩的CSS---实现打字效果
- CSS总结div中的内容垂直居中的五种方法
- 浅析如何更好的进行性能优化:构建策略、图像策略、分发策略、缓存策略、CSS策略、DOM策略、阻塞策略、回流策略、异步更新策略
- NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题及VUE提取 CSS 到单个文件
- CSS魔法堂:Box-Shadow没那么简单啦:)
- VueJS如何引入css或者less文件的一些坑
- CSS font