CSS:如何与高度100%并排的div？

Question

我试图创建一个两个div并排填充我的屏幕100%.左侧div包含一些菜单,右侧包含内容.这是我目前的代码:http://jsfiddle.net/HpWZW/.目前的问题是高度只有我最小的div的内容.所以在这种情况下,右栏中的iframe大于左栏中的菜单项; 但是,高度仅限于左侧divs内容而非右侧.有任何想法吗？谢谢!

码

<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解决方案,可让您的colums共享高度.然后两者都将是最大列的高度.

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

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

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