html - 两列网页，DIV溢出

我需要一些帮助，这困扰着我...

我有以下DIV结构：

<div id="principal">
    <div id="colIzquierda">Some Content</div>
    <div id="colDerecha">Some Content</div>
</div>

并使用以下CSS代码对其进行样式设置：

body, html {
    height:100%;
    margin:0px;
    padding:0px; }

#principal {
    width:1000px;
    height:100%;
    margin:0px auto; }

#colIzquierda {
    width:250px;
    float:left; }

#colDerecha {
    width:750px;
    float:right; }

当我用大量内容填充例如#colDerecha时，我遇到了问题，它溢出了浏览器窗口的高度，然后我看到的是这样的：



深灰色=＃主体，浅灰色=主体，绿色= #colDerecha。

当#colDerecha内容大于屏幕尺寸时，如何使#principal始终获得与#colDerecha相同的高度？

我不知道我对自己的解释是否足够……

请一些想法？我已经尝试将height：100％都添加到#colIzquierda和#colDerecha中，但是没有做到我想要的。它溢出相同，但以其他方式...

最佳答案

一种常见的方法是将父元素display的#principal更改为table，然后将子元素的display设置为table-cell。这样，#colIzquierda和#colDerecha将填充剩余的空间。

Example Here

#principal {
    width:100%;
    height:100%;
    background:gray;
    display:table;
}
#colIzquierda {
    width:25%;
    display:table-cell;
}
#colDerecha {
    width:75%;
    display:table-cell;
    background:gold;
}