这边采用弹性布局来处理

  • 在需要被填充满的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. C++ Builder 开发64程序 使用AnsiString的ToInt和ToDouble会内存泄漏

    AnsiString str="adsfaga"; try { int v=str.ToInt(); } catch(...) { } 上面的代码,在C++ Builder 10 ...

  2. C/C++源码扫描系列- codeql 篇

    首发于 https://xz.aliyun.com/t/9275 概述 codeql 是一个静态源码扫描工具,支持 c, python, java 等语言,用户可以使用 ql 语言编写自定义规则识别软 ...

  3. redis设置密码和开启远程访问

    改密码 默认redis安装后,密码是默认的,通过查看安装目录的config文件,可以查到:requirepass 这个设置,默认是啥就是啥. 需要修改密码的话,把这个注释拿掉,将requirepass ...

  4. 【单片机】初次实验：Keil51的使用

    哔哩哔哩/CSDN/博客园:萌狼蓝天 延时器 delay(int count){ int i,j; for(i=0;i<count;i++){ for(j=0;j<1000;j++); } ...

  5. x509.MarshalSm2PrivateKey

    根据搜索结果,x509.MarshalSm2PrivateKey 函数需要两个参数:一个 *sm2.PrivateKey 和一个 []byte 类型的密码.以下是使用 x509.MarshalSm2P ...

  6. 组件漏洞测试工具---Dependency-Check

    目录 文章综述 Dependency-Check简介 工作原理 常用命令 报告解读 使用场景 缺点 文章综述 本文主要介绍Dependency-Check工具的工作原理和使用方法,并提供一个开源方案帮 ...

  7. jacoco-实战篇-增量覆盖率

    我fork的jacoco源码改造好:https://github.com/exmyth/jacoco 入口:https://github.com/exmyth/jacoco/blob/master/o ...

  8. Qt编写可视化大屏电子看板系统29-模块7品质管理

    一.前言 品质管理模块是在送检合格模块的基础上增加了统计而来,总共包括了三个子模块:品质占比.班组合格率.每日合格率统计,其中品质占比子模块采用饼图控件显示对应的百分比,不同百分比颜色不一样,这个饼图 ...

  9. Qt编写安防视频监控系统20-录像机管理

    一.前言 录像机管理模块,在本系统中除了用来存储NVR信息以外,方便生成对应的摄像机树状列表,目前没有其他用处,一个考虑是为了方便后期拓展,比如改成SDK内核加载视频流和回放视频等,甚至还需要做一些人 ...

  10. vivo手机上的系统级消息推送平台的架构设计实践

    本文由vivo互联网服务器团队李青鑫分享,有较多修订和改动. 1.引言 本文内容来自vivo互联网服务器团队李青鑫在"2021 vivo开发者大会"现场的演讲内容整理而成(现场演讲 ...