当前位置:首页 >> 编程开发 >> HTML+CSS >> 内容

div 第一个子元素适应内容高度,第二个子元素填充剩余高度。

时间:2020/2/29 12:33:28 作者:平凡之路 来源:xuhantao.com 浏览:

父元素 100% 高度


HTML代码:
<div id="main">
  <div class="A"> 头部DIV </div>
  <div class="B">
    下部DIV
    <!-- <div v-for="(item,index) in circulation" :key="item"> 下部DIV </div> -->
  </div>
</div>

CSS代码:
#main {
  width: 100%;
  height: 100%;
  display: flex;
  /*  主轴为垂直方向,起点在上沿。 */
  flex-direction: column;
  /* overflow: hidden; */
  overflow: auto;
}

.A {
  background-color: #85d989;
  overflow: auto;
  /*用于固定高度的情况*/
  /* 空间不足时不会缩小 */
  flex-shrink: 0;
  /*第3个坑*/
}

.B {
  background-color: #cc85d9;
  /* overflow: auto; */
  /* 如果所有项目的 flex-grow 属性都为 1 则他们等分剩余空间*/
  /* 默认为0,即如果存在剩余空间,也不放大 */
  flex-grow: 1;
}

  • 上一篇:HTML5中的Article和Section元素认识及使用
  • 下一篇:没有了
  • 共有评论 0相关评论
    发表我的评论
    • 大名:
    • 内容:
  • 徐汉涛(www.xuhantao.com) © 2024 版权所有 All Rights Reserved.
  • 部分内容来自网络,如有侵权请联系站长尽快处理 站长QQ:965898558(广告及站内业务受理) 网站备案号:蒙ICP备15000590号-1