CSS.div剩余高度

1、

2、

3、资料

　　3.1、div 自适应高度 自动填充剩余高度 - 炉火纯青 - 博客园.html（https://www.cnblogs.com/pangguoming/p/5695184.html）

　　　　方案一：

　　　　3.1.1、HTML

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

　　　　3.1.2、CSS

html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%; background: #D9C666; }

　　　　3.1.3、效果

　　　　

 

　　　　方案二：

　　　　3.1.4、HTML

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

　　　　3.1.5、CSS

html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }

　　　　3.1.6、效果

　　　　

 

　　3.2、【转】CSS实现div的高度填满剩余空间 - 龙帆 - 博客园.html（https://www.cnblogs.com/felixlong/p/4310035.html）

#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}

　　　　重点是要top和bottom一起使用，这是很反常规的用法，可以强制定义盒模型的区域，神奇啊

　　　　ZC：主要理解一下 这里所说的"强制定义盒模型的区域" 的含义，上面的网址资料里面的"box-sizing: border-box" 是不是也是这个意思？

　　　　ZC：根据上一个网页资料的信息，如果"#nav"的父元素不是<body/>的话，"#nav"中加入 "position: relative;"比较好。

　　　　ZC：关键点：父容器设置"position:relative"，需要自适应的容器设置"postion: absolute; top: 100px(固定高度容器.nav的高度); bottom: 0px(与父容器底部);"

4、

5、