Question

我有两个标记的textareas（fiddle）：

<body>
    <h1>Header</h1>
    <label for="ta1">label 1</label>
    <textarea id="ta1">textarea 1</textarea>
    <label for="ta2">label 2</label>
    <textarea id="ta2">textarea 2</textarea>
</body>

这些textareas应该并排放置，并且应该在屏幕上获得尽可能多的空间：

layout sketch

如何使用CSS或JavaScript实现这一目标？

编辑：

Textareas应该

并排放置（直到textareas的宽度小于最小宽度，但这是特殊情况）
自动调整大小
以窗口宽度增长
随着窗户的高度而增长

Answer 1

我找到了另一种使用灵活的盒子布局（fiddle）的纯CSS解决方案：

<强> HTML

<body>
    <h1>Header</h1>
    <div class="row">
        <div class="col">
            <label for="ta1">label 1</label>
            <textarea id="ta1">textarea 1</textarea>
        </div>
        <div class="col">
            <label for="ta2">label 2</label>
            <textarea id="ta2">textarea 2</textarea>
        </div>
    </div>
</body>

<强> CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-flow: column;
}
h1 {
    text-align: center;
}
.row {
    flex: 1;
    display: flex;
    flex-flow: row;
}
.col {
    flex: 1;
    display: flex;
    flex-flow: column;
    margin: 0px 3px;
}
label {
    display: block;
    padding-left: 2px;
}
textarea {
    flex: 1;
    display: block;
    margin: 2px 0;
    padding: 1px;
    border: 1px solid;
    resize: none;
}

Answer 2

JS Fiddle

为.col和label添加textarea以正确并排排列row至align-center

.col{
    float:left;
    padding-right:10px;
}

label, textarea{
    width:100%;
}

.row {
    display:inline-block;
}

修改

添加了jquery以找到身体的确切高度

Js Fiddle

function adjust() { var a = $(window).height() var b = $('header').height() var c = a - b $('.row').height(c) } adjust() $(window).resize(function () { adjust() })

Answer 3

我找到了使用calc的纯CSS解决方案，最符合我的需求（fiddle）：

<强> HTML

<body>
    <h1>Header</h1>
    <div class="row">
        <div class="col">
            <label for="ta1">label 1</label>
            <textarea id="ta1">textarea 1</textarea>
        </div>
        <div class="col">
            <label for="ta2">label 2</label>
            <textarea id="ta2">textarea 2</textarea>
        </div>
    </div>
</body>

<强> CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
h1 {
    text-align: center;
    height: 40px;
    margin: 0;
    padding: 0;
}
.row {
    width: 100%;
    /* consider h1 height */
    height: calc(100% - 40px);
}
.col {
    margin: 0 3px;
    /* consider column count (here 2) and margin (2 * 3px) */
    width: calc(100% / 2 - 6px);
    height: 100%;
    float: left;
}
label {
    display: block;
    width: 100%;
    height: 20px;
    padding-left: 2px;
}
textarea {
    display: block;
    /* only subtract margin, padding and border of textarea */
    width: calc(100% - 4px);
    /* additionally consider label */
    height: calc(100% - 20px - 8px);
    margin: 2px 0;
    padding: 1px;
    border: 1px solid;
    resize: none;
}

两个标记的textareas并排最大尺寸

编辑：

3 个答案: