html - 左 Div 和右 Div 的高度应该相等..!

Question

我有两个要求。

1. 左边的div必须和右边的div一样高

2. 我需要一个页脚 div。

这是代码。

HTML

<div id="base">
    <div id="leftleft">left
        <br/>I WANT THIS HEIGHT TO BE SAME AS RIGHT DIV
        <br/>
    </div>
    <div id="rightright">RIGHT DIV HEIGHT WILL BE
        <br/>CHANGED DYNAMICALLY.
        <br/>I WANT TO MATCH THE LEFT
        <br/>AND RIGHT DIV HEIGHT EQUALLY.
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>
    </div>
    <div id="footer">
        this has to be in the bottom
    </div>
</div>

CSS

#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
    float:left;
}
#rightright {
    display: table-cell;
    float:left;
}
#footer{
    clear:both;
}
#base {
    height: 100%;
    display: table;
    position:relative;
}

fiddle ,

Demo in Fiddle

如果我放置 float:left，页脚会下降，但左侧 div 高度不匹配。

如果我删除 float:left，页脚 div 不会下降 :(

Answer 1

试试这段代码

移除 float:left;

就像这段代码

#base {
    height: 100%;
    width:100%;
    display: table;
}
#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
   vertical-align:top;
}
#rightright {
    display: table-cell;
  vertical-align:top;
}
#footer{
    display:table-row;
    width:100%;background:red;
}

Demo