html - 两栏网页，DIV溢出

Question

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

我有以下 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 很多内容时遇到问题，它溢出了浏览器窗口的高度，然后我可以看到类似这样的内容:

其中深灰色 = #principal，浅灰色 = body，绿色 = #colDerecha。

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

我不知道我自己解释得够不够......

请提供一些想法？我尝试将 height:100% 添加到 #colIzquierda 和 #colDerecha，但没有按照我的意愿进行。它溢出相同，但以其他方式...

Answer 1

一种常见的方法是将父元素#principal的display更改为table，然后设置将子元素显示到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;
}