如何在不使用固定大小的情况下创建两列（一行有两行，另一行有一列）？

I've successfully created two columns with various number of rows, however, I don't want to use fixed sizes. Is it possible without Javascript?

我已成功创建了两列具有不同行数的列,但是,我不想使用固定大小。没有Javascript可以吗?

Here's my code:

这是我的代码:

HTML:

<body>
<div class='table'>
    <div class='cell'>
        <div class='row'>test</div>
        <div class='row'>test</div>
    </div>
    <div class='cell'>
           test
    </div>
</div>
</body>

CSS:

body
{
    font-size: 20px;
    color: white;
    background-color: black;
}
.table
{
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.row
{
    background-color: red;
    height: 50%;
}
.cell
{
    width: 50%;
    float: left;
    height: 100%;
    background-color: blue;
}

Preview: https://jsfiddle.net/XyYND/22/

2 个解决方案

#1

You just need to add height:100% to your other elements.

您只需要为其他元素添加高度:100%。

Here's an updated fiddle: https://jsfiddle.net/XyYND/23/

这是一个更新的小提琴:https://jsfiddle.net/XyYND/23/

And the CSS:

而CSS:

html {
height:100%;
}

body
{
    font-size: 20px;
    color: white;
    background-color: black;
    height:100%;
}
.table
{
    width: 100%;
    height: 100%;
    background-color: yellow;
}
.row
{
    background-color: red;
    height: 50%;
}
.cell
{
    width: 50%;
    float: left;
    height: 100%;
    background-color: blue;
}

And the HTML:

和HTML:

<body>
<div class='table'>
    <div class='cell'>
        <div class='row'>test</div>
        <div class='row'>test</div>
    </div>
    <div class='cell'>
           test
    </div>
</div>
</body>

#2

You could use flexbox (Fiddle link):

你可以使用flexbox(小提琴链接):

.table
{
    display: flex;
    width: 100%;
    height: 500px;
}
.cell
{
    flex: 1;
    height: 100%;
    background-color: blue;
}

flex: 1; will make the divs take as much space as possible.

flex:1;将使div占用尽可能多的空间。

#1