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

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

最短的答案是使用正确的表格，min-height也可以帮助你，但不是所有的浏览器都尊重它。

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：如何将两个div并排高度100％？

4 个答案: