zoukankan      html  css  js  c++  java
  • div 自适应高度 自动填充剩余高度

    方案1:

    Html:

    <div class="outer">
        <div class="A"> 头部DIV </div>
        <div class="B">下部DIV </div>
    </div>

    CSS:

    html,
    body { height100%padding0margin0; }
    .outer { height100%padding100px 0 0; box-sizing: border-box ; positionrelative; }
    .A { height100pxbackground#BBE8F2positionabsolutetop0 left0 width100%; }
    .B { height100%background#D9C666; }

    效果:

    方案2:

    HTML:

    <div class="outer">
        <div class="A">头部DIV</div>
        <div class="B">下部DIV</div>
    </div>

    CSS:

    html,
    body { height100%padding0margin0; }
    .outer { height100%padding100px 0 0; box-sizing: border-box ; }
    .A { height100pxmargin-100px 0 0background#BBE8F2; }
    .B { height100%background#D9C666; }

    效果:

    文章转自:https://www.cnblogs.com/pangguoming/p/5695184.html

  • 相关阅读:
    Hibernate
    Redis的学习
    Redis的人门以及使用
    Win32 配置文件用法
    Using virtual lists
    windows log
    Win查询注册表获取CPU与内存参数
    MFC 多线程及线程同步
    使用Custom Draw优雅的实现ListCtrl的重绘
    MFC工具栏设计
  • 原文地址:https://www.cnblogs.com/wangyunhui/p/10370715.html
Copyright © 2011-2022 走看看