这边采用弹性布局来处理

  • 在需要被填充满的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. Win10虚拟机安装Docker解决Docker Engine Stopped问题记录

    跟着网上的帖子开启WSL2安装DockerDesktop, 但是无法启动Docker,一直[Docker Engine stopped] 继续跟着网上的帖子解决问题,检查电脑各种配置都搞一通后还是无法 ...

  2. uni-app项目分包后子包中静态资源丢失

    前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验非常棒,公司项目就是主推uni-app. 坑位 随着项目越做越 ...

  3. 腾讯技术岗位笔试&面试题(五)

    说在前面 本篇文章是腾讯技术面试题目汇总第五篇. 后续将持续推出互联网大厂,如阿里,腾讯,百度,美团,头条等技术面试题目,以及答案和分析. 欢迎大家点赞关注转发. 1.define.const.typ ...

  4. JAVA-通过大疆TSDK的API直接获取红外图片温度信息

    一.前言 看过很多关于大疆红外图片用TSDK取温的方式,但是网上能搜到的大部分教程都是通过官方下载文件smple编译出来的程序来取温,如果这样做,虽然确实也能够实现目的,但不得不说,不但会降低运行速度 ...

  5. manim边学边做--移动动画

    在Manim中,其实直线移动的动画非常简单,每个Mobject对象都有animate属性, 通过obj.animate.shift()或者obj.animate.move_to()很容易将对象从一个位 ...

  6. ARGOCD用户管理

    1.创建用户alice kubectl apply -f argocd-cm.yaml apiVersion: v1 kind: ConfigMap metadata: name: argocd-cm ...

  7. MyBatisPlus中updateById与updateAllColumnById方法区别

    实现 updateById方法在插入时,会根据实体类的每个属性进行非空判断,只有非空的属性所对应的字段才会出现在SQL语句中. updateAllColumnById方法在插入时,不管属性是否为空,属 ...

  8. Qt/C++实现帧同步播放器/硬解码GPU绘制/超低资源占用/支持8K16K/支持win/linux/mac/嵌入式/国产OS等

    一.前言 首先泼一盆冷水,在不同的电脑上实现完完全全的帧同步理论上是不可能的,市面上所有号称帧同步的播放器,同一台电脑不同拼接视频可以通过合并成一张图片来绘制实现完完全全的帧同步,不同电脑,受限于网络 ...

  9. Qt编写视频监控系统75-计算实时码率并显示

    一.前言 做监控摄像头的实时视频显示,一般还会要求统计实时码率显示在通道画面上,一个是为了测试下整个软件的性能,同时也看下当前到底是主码流还是子码流,设备到底是不是真的按照设定的码流大小来传输视频数据 ...

  10. 《深入理解Mybatis原理》MyBatis配置解析过程

    配置解析主体方法 public Configuration parse() { if (parsed) { throw new BuilderException("Each XMLConfi ...