CSS：如何与高度100％并排？ [英] CSS: How to have to divs side by side with height 100%?

问题描述

我试图创建一个两个并排，填充我的屏幕100％。左div包含一些菜单，右边的内容。这里是我现在的代码： http://jsfiddle.net/HpWZW/ 。当前的问题是高度只有我最小的div的内容。所以在这种情况下，我的右侧列中的iframe大于左侧列中的菜单项;然而，高度限制为左divs内容不是右边。有任何想法吗？谢谢！

I am trying to create a two div's side by side that fill my screen 100%. The left div contains some menu and the right the content. Here's the code I have at the moment: http://jsfiddle.net/HpWZW/ . The current problem is the height is only as large as my smallest div's content. So in this case my iframe in the right column is larger than my menu items in the left column; however, the height is limited to the left divs contents not the right. Any ideas? Thanks!

代码

<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;
}

推荐答案

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

I have ran in the same problem so many times, until I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

这是一个有效的CSS解决方案，使你的colums共享的高度。

It is a valid CSS solution for making your colums share the height. Then both will be the height of the largest column.

如果你想让你的colums填满整个屏幕，你可以使用像

If you want to make your colums fill the whole screen you could use something like

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

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

这篇关于CSS：如何与高度100％并排？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！