这边采用弹性布局来处理

  • 在需要被填充满的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. 用word发博客

    测试 标题一 第一段文字 测试图片 标题二 Test test

  2. NetCore2.2升级到3.1总结

    最近公司要求netcore版本从2.2升级到3.1,升级需要修改的配置项和遇到的问题我这边做一个简单的总结. 可参考资料: https://docs.microsoft.com/zh-cn/aspne ...

  3. 【UI框架】ANtDesignVue中的Content超过一页显示问题

    假设content部分是绿色 当内容超出一页之后,滑下去,后面的都没有底色. 如果footer有内容,content的内容甚至会和footer内容重叠在一起,同时,footer的内容随着下滑,位置就不 ...

  4. Not all slots covered! Only 5461 slots are available. Set checkSlotsCoverage = false to avoid this check

    Not all slots covered! Only 5461 slots are available. Set checkSlotsCoverage = false to avoid this c ...

  5. 在openEuler RISC-V上无痛部署Solidity

    近几年区块链很火,随着各国政府对加密技术的监管政策不断变化和BTC的暴涨,越来越多人对这项去中心化的技术充满着期待.这次我用openEuler 24.09 RISC-V的远程机器尝试编译了Solidi ...

  6. 快速解决MySQL：Table xxx is marked as crashed and should be repaired五个办法

    查看MySQL错误日志看到 Table xxx  is marked as crashed and should be repaired 解决办法如下 第一种: 1.首先进入mysql命令台: mys ...

  7. Qt编写安防视频监控系统33-onvif云台控制

    一.前言 云台控制也是onvif功能中最常用的,最常用的功能排第一的是拿到视频流地址,排第二的就是云台控制了,云台控制的含义就是对带云台的摄像机进行上下左右的移动,一般云台摄像机都是带有一个小电机,一 ...

  8. 阿里技术分享：闲鱼IM基于Flutter的移动端跨端改造实践

    本文由阿里闲鱼技术团队祈晴分享,本次有修订和改动,感谢作者的技术分享. 1.内容概述 本文总结了阿里闲鱼技术团队使用Flutter在对闲鱼IM进行移动端跨端改造过程中的技术实践等,文中对比了传统Nat ...

  9. 基于开源IM即时通讯框架MobileIMSDK：RainbowChat v8.3版已发布

    关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架,超轻量级.高度提炼,一套API优雅支持UDP .TCP .WebSocket 三种协议,支持iOS.A ...

  10. 阿里IM技术分享(八)：深度解密钉钉即时消息服务DTIM的技术设计

    本文引用自InfoQ社区"5亿用户如何高效沟通?钉钉首次对外揭秘即时消息服务DTIM"一文,作者陈万红等.策划褚杏娟,有修订和改动. 一.引言 本文是国内企业IM的事实王者钉钉首次 ...