两列网页，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相同的高度？

我不知道我是否足够解释自己......

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

Answer 1

<div id="principal">
    <div id="colIzquierda">Some Content</div>
    <div id="colDerecha">Some Content</div>
    <div style="clear: both;"></div>
</div>

为什么在问题中使用PHP标记？

Answer 2

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

Example Here

#colDerecha