zoukankan      html  css  js  c++  java
  • 子节点填充父元素除去一固定高度后的剩余高度

    例如节点结构如下:

    <div class='container'> 
      <div class="top">top</div>
      <div class="bottom">bottom</div>
    </div>

    父元素高度为一定值(实际应用中是页面加载后再设置的值),子元素.top的高度为50px,要求.bottom的高度填充父元素剩余的所有高度。

    用.bottom{height:100%;}肯定不行,因为这样它的高度会等于父元素的高度,而不是小于。

    解决方法:同时设置绝对定位元素的top和bottom来拉伸它的高度。

    .container{height:200px;background: gray;position: relative;}
    .top{background: green;height: 50px;}
    .bottom{background: blue;position:absolute;width:100%;left: 0;top:50px;bottom:0;}

  • 相关阅读:
    python之函数对象、函数嵌套、名称空间与作用域、装饰器
    python之函数
    python基础-小练习
    python基础之文件操作
    python基础之字符编码
    web开发-Django博客系统
    HotSpot的算法实现
    垃圾回收机制(GC)
    Java注意点...
    JVM内存区域及对象
  • 原文地址:https://www.cnblogs.com/yigeqi/p/3929299.html
Copyright © 2011-2022 走看看