CSS：如何让两个div并排显示且高度为100％？

Question

CSS：如何让两个div并排显示且高度为100％？

3

我正在尝试创建两个并排的div，使它们填满整个屏幕。左侧的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;
}

- daveomcd

4个回答

1

请注意，这是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>

- Niclas Larsson

0

最简单的方法是使用正确的表格，min-height也可以帮助你，但并不是所有浏览器都支持它。

- drk

我花了很长时间试图弄清楚所有现代解决方案应该如何工作，以及为什么它们在我的情况下似乎不起作用。直到我看到这篇文章，我才想起一个两列、一行的表格是“显而易见”的解决方案。 - user1476044

-1

这个对你想要的东西有效吗？

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

- Ian Overton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Neograph734 · Accepted Answer

我曾经遇到过同样的问题，直到我发现了这个网址：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; 
}