这边采用弹性布局来处理

  • 在需要被填充满的div上设置display:flex;，然后根据你所需要填充宽度（flex-direction:column;）高度（flex-direction:row;）设置flex-direction
  • 然后用来填充的div上设置flex: auto
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>文档标题</title>

</head>

<body>

  <div style="width:600px; height:300px; display:flex; flex-direction:column; background-color:pink;padding:5px">

    <div style="width:100%;height:50px; background-color: #a5ecff">

    </div>

    <div style="width:100%;background-color: #c9c9c9; flex: auto">

    </div>

  </div>

</body>

</html>
  1. 粉色为需要被填满的，5个像素的padding更容易看清楚父级容器是粉色的
  2. 蓝色为固定的，或者是根据条件会被隐藏的
  3. 灰色高度可以根据容器高度剩余来调整，会自动充满粉色区域

div剩余高度自动填充满的更多相关文章

  1. QT UI 使一个QWidget里面的元素自动填充满本QWidget

    使一个QWidget里面的元素自动填充满本QWidget: 对象查看器,右键点击本QWidget,选择"布局",为此QWidget增加一个布局. 如果该QWidget只有一个对象, ...

  2. div 自适应高度 自动填充剩余高度

    方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...

  3. -webkit-box 高度自动填满

    <style> .box{ display: -webkit-box; -webkit-box-orient: vertical; height: 200px; background: # ...

  4. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  5. 如何将div高度填满剩余高度

    下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body">     <div id="navbar ...

  6. 让2个并列的div根据内容自动保持同等高度js

    有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到“如果右块高度比左块低,会不会导致左块的内容被 ...

  7. 两个div，高度都是100% 用 display:flex; 和 min-height 一边撑高了，另一边自动走 （不加flex不自动撑开）

    两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走

  8. H5 布局 -- 让容器充满屏幕高度或自适应剩余高度

    在前端页面布局中,经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求.一般这时候都会想当然的使用 height:100% 这样的 CSS 来写. 这样写的话,当容器内内容很多的时候是没有问题的, ...

  9. li 水平排列并自动填满 ul

    找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...

  10. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

随机推荐

  1. Simple FOC内置通信接口学习(二)：电机命令接口

    本文参(zhao)考(chao)至官方文档https://docs.simplefoc.com/docs_chinese/commander_interface Commander 接口 Comman ...

  2. 藏不住了，这届数字打工人（RPA）想在各行各业“当骨干”！

    数字化时代,最红的"打工人"是谁? 无疑,是RPA(数字化劳动力). 这种由机器人流程自动化+AI驱动,模拟人点击.移动鼠标等在电脑上的操作,在各种规则明确.高重复度业务场景中代替 ...

  3. 技术漫谈｜IVR通用开发框架简说

    IVR为Interactive Voice Response的缩写,意为交互式语音应答(系统).它可以应答客户的呼叫,然后为呼叫者提供语音导航或自助服务,呼叫者可通过按键输入或使用语音命令进行选择.随 ...

  4. 2023 IDC中国数字金融论坛丨中电金信向行业分享“源启+应用重构”新范式

    9月8日,IDC主办的"2023 IDC中国数字金融论坛"在北京召开.中电金信受邀参会,并带来了深度数字化转型趋势之下关于应用重构的分享与洞见. 论坛重点关注金融科技创新发展趋势与 ...

  5. metasploit扫描mysql空密码

    靶机IP 192.168.255.100 攻击机IP 192.168.255.200 流程开始 查找mysql登录模块 msf5 > search mysql_login 加载这个模块 msf5 ...

  6. 【数据结构】【冒泡排序法】Java写冒泡排序法

    public class 冒泡 { public static int[] maopao(int[] arr){ for(int i=0;i<arr.length-1;i++){ for(int ...

  7. Qt/C++路径轨迹回放/回放每个点信号/回放结束信号/拿到移动的坐标点经纬度

    一.前言说明 在使用百度地图的路书功能中,并没有提供移动的信号以及移动结束的信号,但是很多时候都期望拿到移动的哪里了以及移动结束的信号,以便做出对应的处理,比如结束后需要触发一些对应的操作.经过搜索发 ...

  8. Qt数据库应用20-csv文件转xls

    一.前言 最近又多了个需求就是将csv格式的文件转xls,需求一个接着一个,还好都是真实的需求,而且都是有用的需求,并不是不靠谱的需求,不靠谱的需求就比如程序自动识别手机壳颜色自动换背景颜色或者边框颜 ...

  9. 即时通讯安全篇（十一）：IM聊天系统安全手段之传输内容端到端加密技术

    本文由融云技术团队分享,原题"互联网通信安全之端到端加密技术",内容有较多修订和改动. 1.引言 在上篇<IM聊天系统安全手段之通信连接层加密技术>中,分享了关于通信连 ...

  10. 如何设计一个注册中心？以Zookeeper为例

    这是小卷对分布式系统架构学习的第8篇文章,在写第2篇文章已经讲过服务发现了,现在就从组件工作原理入手,讲讲注册中心 以下是面试题: 某团面试官:你来说说怎么设计一个注册中心? 我:注册中心嘛,就要有服 ...