两个div,知道其中一个div的高度或宽度,怎么使另一个div占满剩余的部分.

解法之一:

如下例子(以占满整个高度为例  ):

<div calss = "ab">

        <div class="a">div元素a</div>

        <div class="b"> div元素b</div>

</div>

      

<style>

/* 父容器高300px*/

  .ab{

       height:300px;

       position:relative;

       width: 100px

  }

 /* 假设已知a容器高度66px*/

   .a{

      height:66px;

      width:100px;

   }

/*在b容器中注意不要设置height属性,top和bottom为0px,同时position为absolute时,b容器就会自动将剩余的填满 */

  .b{

     width:100px;

     positon:absolute;

    top:66px;

    bottom:0px;

 }

</style>

注意! ab容器中position不能为static值,如果是的static的话,b容器中的absolute(绝对定位)就不能根据ab容器进行定位.此外如果ab容器中没有设置positon时,默认是static,所以父容器要设置position为非static值.

同理,占满整个宽度的也一样,top和bottom属性改成left和right即可.

解法二:

(以高度占满为例)

2个子div,一个固定宽度,另一个的height:100%,同时margin-left:固定div的高度。