[css] 外层有一个自适应高度的div,里面有两个div,一个高度固定300px,另一个怎么填满剩余的高度?

[css] 外层有一个自适应高度的div,里面有两个div,一个高度固定300px,另一个怎么填满剩余的高度?

可以设置外层自适应高度的容器为flex布局,利用flex-basis属性即可实现自动填满剩余高度;代码如下:.container{display: flex;flex-flow: column nowrap;height: 500px;border: 2px dashed orange;
}
.area1 {flex-basis: 300px;background-color: lightblue
}
.area2 {flex: 1;background-color: darkcyan;
}<section class="container"><div class="area1">300px</div><div class="area2">other</div>
</section>

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/412704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue之watch用法

watch是一个对象&#xff0c;键是需要观察的表达式&#xff0c;值是对应回调函数。值也可以是方法名&#xff0c;或者包含选项的对象 watch:{ //属性     msg: function(newVal,oldVal){console.log(oldVal改变成newVal)},  //函数msg1(newVal,oldVal){console.log(oldV…

PMP读书笔记(第5章)

大家好&#xff0c;我是烤鸭&#xff1a;     今天做一个PMP的读书笔记。 第五章 项目范围管理项目范围管理项目范围管理的核心概念项目范围管理的发展趋势和新兴实践裁剪时需要考虑的因素在敏捷或适应型环境中需要考虑的因素5.1 规划范围管理5.1.1 规划范围管理&#xff1…

[css] 说说你对CSS样式覆盖规则的理解

[css] 说说你对CSS样式覆盖规则的理解 1.选择器的权重覆盖&#xff1b; 2.相同选择器的顺序覆盖&#xff1b; 3.行内样式>内联样式>外联样式个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主…

特殊符号作用

单引号&#xff1a;保留括起的所有字符的字面值。取消多个字符的特殊含义双引号&#xff1a;$、反引号&#xff08;可替换成$()&#xff09;、反斜杠特殊含义保留下来&#xff0c;而其他特殊符号只保留字面值。取消多个字符的特殊含义\作为转义字符&#xff0c;仅取消单个字符的…

[css] 写出几个初始化CSS的样式,并解释说明为什么要这样写

[css] 写出几个初始化CSS的样式&#xff0c;并解释说明为什么要这样写 padding:0; margin:0;为了解决各个浏览器显示不一样的问题个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起…

php中foreach循环遍历二维数组

最近在用tp3.2框架&#xff0c;在查询的时候用到了select()&#xff0c;这条语句返回的是二维数组&#xff0c;所以在对返回的数据做处理时&#xff0c;遇到了些麻烦&#xff0c;百度了下foreach&#xff0c;终于用foreach解决了数据的筛选问题 &#xff08;因为不知道该怎么设…

PMP读书笔记(第6章)

大家好&#xff0c;我是烤鸭&#xff1a;     今天做一个PMP的读书笔记。 第六章 项目进度管理项目进度管理项目进度管理的核心概念项目进度管理的发展趋势和新兴实践裁剪考虑因素关于敏捷/适应型环境的考虑因素6.1 规划进度管理6.1.1 规划进度管理&#xff1a;输入6.1.1.1…

[css] display有哪些值?分别说明他们的作用是什么?

[css] display有哪些值&#xff1f;分别说明他们的作用是什么&#xff1f; display:block/inline-block 给元素转块/转行内块 display:inline 把元素转成内联元素&#xff08;我很少用到&#xff09; display:none让元素消失&#xff0c;不显示 display:flex弹性布局 我常用的…

connect ECONNREFUSED 151.101.0.133:443 | spawn xxx ENOENT

大家好&#xff1a; 我是烤鸭&#xff0c;今天分享一个node项目打包失败的问题。 1. 问题复现 之前一直出现node项目打包失败的情况&#xff0c;使用测试环境的jenkins没问题&#xff0c;生产的有问题。基本可以排除代码层面的问题。 报错信息如图。另外说一下出现了 con…

Python(八) 函数、模块

函数 定义函数 1、意义&#xff1a;函数是实现某个功能的一些代码&#xff0c;提高代码的复用性。 2、定义:用def关键字定义函数&#xff0c; 3、函数组成&#xff1a;函数由函数名、形参、函数体、调用函数&#xff08;里面会有函数体&#xff09;组成 4、要使用函数&#xff…

[css] 怎么让body高度自适应屏幕?为什么?

[css] 怎么让body高度自适应屏幕&#xff1f;为什么&#xff1f; 为何只设置body{height&#xff1a;100%}不行&#xff1f; height&#xff1a;100%是相对于父元素来说的&#xff0c;如果只设置body的高度属性&#xff0c;由于其父元素是html高度未设置&#xff0c;且并非浏览…

PMP读书笔记(第7章)

大家好&#xff0c;我是烤鸭&#xff1a;     今天做一个PMP的读书笔记。 第七章 项目成本管理项目成本管理项目成本管理的核心概念项目成本管理的趋势和新兴实践裁剪考虑因素关于敏捷/适应型环境的考虑因素7.1 规划成本管理7.1.1 规划成本管理&#xff1a;输入7.1.1.1 项目…

[css] font-style的属性有Italic和oblique,两者有什么区别呢

[css] font-style的属性有Italic和oblique&#xff0c;两者有什么区别呢 italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字&#xff0c;而Oblique是倾斜的文字&#xff0c;对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.个人简介 我是歌谣&am…

PMP读书笔记(第8章)

大家好&#xff0c;我是烤鸭&#xff1a;     今天做一个PMP的读书笔记。 第八章 项目质量管理项目质量管理项目质量管理的核心概念项目质量管理的发展趋势和新兴实践裁剪时需要考虑的因素在敏捷或适应型环境中需要考虑的因素8.1 规划质量管理8.1.1 输入8.1.1.1 项目章程8.…

[css] IE(6/7/8/9/10/11/Edge)下的hack写法分别有哪些?

[css] IE(6/7/8/9/10/11/Edge)下的hack写法分别有哪些&#xff1f; IE9以及<IE9: \9;IE8以及>IE8: \0;3.IE7以及<IE7: *;4.IE6:*或_;5.edge不清楚;个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起…

SQL Server Query界面不能录入中文

ctrl空格转载于:https://www.cnblogs.com/chengxiaofei2018/p/10065328.html

PMP读书笔记(第9章)

大家好&#xff0c;我是烤鸭&#xff1a;     今天做一个PMP的读书笔记。 第九章 项目资源管理项目资源管理项目资源管理的核心概念项目资源管理的趋势和新兴实践裁剪考虑因素在敏捷或适应型环境中需要考虑的因素9.1 规划资源管理9.1.1 规划资源管理&#xff1a;输入9.1.1.…

[css] 写出你遇到过IE6/7/8/9的BUG及解决方法

[css] 写出你遇到过IE6/7/8/9的BUG及解决方法 把以前兼容IE6.7学习的东西搬出来了&#xff0c;还以为不见了。兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间隙问题——vertical-align&#xff1a;top 4.ie6下高度小于19px处理成19px&#xff1b;font-size:0;或…

读书印记 - 《混乱:如何成为失控时代的掌控者》

虽然已经听过一遍语音讲解&#xff0c;但读一遍书仍有很大的收获&#xff0c;从某种意义上说这本书真的纠正了我一些重大的错误观念。 创造力、办公环境&#xff1a;在我的认知中&#xff0c;一直盲信整洁规律是个好习惯&#xff0c;从这本书中才一声冷汗的认识到这是多么错误的…

PMP 第六版 p25 矩阵图 方便记忆 口诀

大家好&#xff0c;我是烤鸭&#xff1a;     这是我第六版PMP矩阵图和自己总结的方便记忆的方法。 记忆方法&#xff1a; 首先是6大管理过程&#xff0c;10大知识领域。这个需要背下来。 过程&#xff1a;启动-规划-执行-监控-收尾 知识领域&#xff1a;整合-范围-进度-…