CSS:如何并排放置两个高度为 100% 的 div？

Question

我正在尝试并排创建两个 div，以 100% 填充我的屏幕。左边的 div 包含一些菜单，右边的是内容。这是我现在的代码:http://jsfiddle.net/HpWZW/ .当前的问题是高度仅与我最小的 div 的内容一样大。所以在这种情况下，右栏中的 iframe 比左栏中的菜单项大；但是，高度仅限于左侧的 div 内容，而不是右侧的。有任何想法吗？谢谢!

代码

<div>
    <div class="table">
        <div class="innerLeft">
            <span>Left Column</Span>
        </div>

        <div class="innerRight">
            <span>Content with Iframe</span>
        </div>
    </table>
</div>​

...

html, body {height: 100%}

.table {

    display: table;
    height: 100%;

}

.innerLeft {

    display: table-cell;
    min-width: 160px;    

    background-color: lightblue;
    color: black;
}

.innerRight {

    display: table-cell;
    width: 100%;
    vertical-align: top;

    background-color: red;
    color: white;
}

Answer 1

我已经多次遇到同样的问题，直到我发现这个:http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

这是一个有效的 CSS 解决方案，可以让您的列共享高度。那么两者都将是最大列的高度。

如果你想让你的列填满整个屏幕，你可以使用类似的东西

.innerLeft {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%; 
}

.innerRight {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0; 
}