父元素高度不確定，子元素左右等高的div布局

上一篇介紹了實現幾個div並排居中點這里，但是指定了高度，這篇文字主要說一下父元素高度不確定，子元素左或右高度不確定且高度相同布局div盒子

三個div盒子如下
<div class="container">
  <div id=left"></div>
    <div id="right"></div>
</div>

第一種：表格布局display: table+display: table-cell方式：

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
display: table;
height: 200px;/*高度無效*/
}
#left {
width: 80%;
background: #063;
display: table-cell;
}
#right {
width: 20%;
background: #0C3;
display: table-cell;
}

 

但是這樣有一個缺點，display: table-cell無法指定高度，寬度，等屬性，高度有內容撐高。左右高度一致，由最高的一個決定。

 

第二種：display: -webkit-box/fiex實現

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
display: -webkit-box;
}
#left {
width: 80%;
background: #063;
/*max-height:200px;/*由內容撐高，設置最大高度，多的出現滾動條*/
}
#right {
width: 20%;
background: #0C3;
max-height:200px;/*由內容撐高，設置最大高度，多的出現滾動條*/
}

運行結果和上面一樣，但可以設定最高的div的max-height，不至於使內容少的一個看上去太孤單，像這樣

 

第三種：使用絕對定位的方式來實現（推薦使用）

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
position: relative;
}
#left {
width: 80%;
background: #063;
max-height:200px;/*由內容撐高，設置最大高度，多的出現滾動條*/
}
#right {
width: 20%;
background: #0C3;
position: absolute;
height: 100%;/*高度依賴父元素，父元素由左邊撐高，*/
right: 0px;
top: 0px;
}

結果如圖