文章目录

使用弹性盒子模型display:box,会发现我们想将盒子中的元素填满,如果使用width:100%,height:100%是不行的,因为弹性盒子本身没有具体宽高,那么我们怎么做呢?有俩个办法。

  • 一、需要填满的元素也使用盒子模型,把该元素也设置成box,然后把他一等分。但是这样做有个缺点,如果该元素内部元素还需要填满或用百分比CSS又不行了,这样又得使用BOX,感觉有点恶性循环的感觉。
    例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div class="content">
    <div class='innerBox'>
    <div class='fill'></div>
    </div>
    </div>
    <style type="text/css">
    .content{
    display: -webkit-box;
    -webkit-box-orient:vertical;
    }
    .content .innerBox{
    -webkit-box-flex:1;
    // 设置成BOX布局,这样 .fill 元素才能分配容器比列
    display: -webkit-box;
    -webkit-box-orient:vertical;
    }
    .content .innerBox .fill{
    -webkit-box-flex:1;
    }
    </style>
  • 二、使用传统的relative+absolute拉伸方式,这种方式使用后就能保证内部元素是个绝对定位的普通元素,width、height、百分比等CSS属性随便使用!
    例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <div class="content">
    <div class='innerBox'>
    <div class='fill'></div>
    </div>
    </div>
    <style type="text/css">
    .content{
    display: -webkit-box;
    -webkit-box-orient:vertical;
    }
    .content .innerBox{
    -webkit-box-flex:1;
    // 设置relative,这样才能使 .fill 的 absolute相对于 .innerBox
    position:relative;
    }
    .content .innerBox .fill{
    position:absolute;
    width:100%;
    height:100%;
    /*或者使用拉伸方式
    top:0;
    bottom:0;
    left:0;
    right:0;
    */
    }
    </style>
此文是本站原创,转载请标注作者和链接出处!