CSS：如何通过侧高度100％有div的一面呢？(CSS: How to have to divs

我想通过侧，填补我的屏幕100％创建两个div的一面。左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

这是使你的colums共享高度有效的CSS的解决方案。那么两者都将是最大的柱的高度。

如果你想使你的colums填补你可以使用类似的整个屏幕

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

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

Answer 2:

请注意，这是旧的浏览器CSS3和不会工作。

CSS3

<style>
html, body{height:100%;padding:0;margin:0;}
        div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
         div.table{width:100%;height:100%;}
          div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>

HTML：

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

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

页：

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height:100%;
                padding:0;
                margin:0;
            }
            div.table, div.table * {
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
            }
            div.table {
                width:100%;
                height:100%;
            }
            div.table div {
                border:1px solid black;
                width:50%;
                height:100%;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="table">
            <div class="innerLeft"> <span>Left Column</span>

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

            </div>
        </div>
    </body>
</html>

上面的代码将创建两列，只要你想填满整个屏幕或部分。

下面的代码可用于仅填满整个屏幕（容器中使用绝对位置时的行为奇数时，存在的解决方法虽然）：

<!DOCTYPE html>
<html>

    <head>
        <style>
            html, body {
                height:100%;
                padding:0;
                margin:0;
            }
            #left {
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                left:0;
                background:red;
            }
            #right {
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                right:0;
                background:blue;
            }
        </style>
    </head>

    <body>
        <div id="left"></div>
        <div id="right"></div>
    </body>

</html>

Answer 3:

最短answear是使用适当的表格，最小高度还可以帮助你，但不是所有的浏览器尊重它。

Answer 4:

这是否工作，为您想要什么？：

http://jsfiddle.net/Sgfnm/

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

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


.table {

    display: block;

}

.innerLeft {

    display: block;
    width: 160px;    

    background-color: lightblue;
    color: black;
    float:left;
}

.innerRight {

    display: block;
    width: 100%;
    vertical-align: top;

    background-color: red;
    color: white;
}

文章来源: CSS: How to have to divs side by side with height 100%?