Question

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

这是我的代码：

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

预览：https://jsfiddle.net/XyYND/22/

Answer 1

您只需要为其他元素添加高度：100％。

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

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

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>

Answer 2

您可以使用flexbox（Fiddle link）：

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

flex: 1;会让div占用尽可能多的空间。

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

2 个答案: