div自适应高度自动填充剩余高度

方案1：

HtML：

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

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;
 }
    

效果：

方案2：

HTML：

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

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;
 }
    

效果：

到此这篇关于div自适应高度自动填充剩余高度的文章就介绍到这了,更多相关div自适应高度 内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！