html - 如何匹配CSS高度的左和右div？

我想相等地匹配左和右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 BASED ON THE SERVER SIDE DATA.
                <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>

CSS，

    #leftleft {
            float: left;
            background: #1B8BC6;
            width: 300px;
        }
        #rightright {
            float: left;
        }
        #base {
            height: 100%;
        }

小提琴，

http://jsfiddle.net/9Kwry/1/

有人可以给我建议吗？谢谢。

最佳答案

因此，您可以执行display: table;，然后将divs设置为display: table-cell。因此，左侧和右侧将始终相同。好的旧桌子！

CSS：

#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
}
#rightright {
    display: table-cell;
}
#base {
    height: 100%;
    display: table;
}

DEMO HERE