兩個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的高度。