两个带标签的文本区域并排，最大尺寸答案

【问题标题】：Two labeled textareas side by side with max size两个带标签的文本区域并排，最大尺寸
【发布时间】：2014-10-05 08:46:55
【问题描述】：

我有两个带标签的文本区域 (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>

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

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

编辑：

文本区域应该

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

【问题讨论】：

标签： javascript html css textarea

【解决方案1】：

我发现了另一个使用灵活框布局的纯 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%;
    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;
}

【讨论】：

【解决方案2】：

JS Fiddle

为label 和textarea 添加.col 以正确并排对齐，并将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()
})

【讨论】：

我重写了对调整大小行为的描述，因为它有点误导。文本区域本身应该增长，而不是它们周围的空间。

【解决方案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;
}

【讨论】：