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

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

javascript html css

Javascript 两个带标签的文本区域并排，最大尺寸,javascript,html,css,textarea,Javascript,Html,Css,Textarea,我有两个带标签的文本区域（）：标题标签1 文本区域1 标签2 文本区域2 这些文本区域应并排放置，并应在屏幕上获得尽可能多的空间：如何使用CSS或JavaScript实现这一点编辑：文本区域应并排放置（直到文本区域的宽度小于最小宽度，但这是一种特殊情况）自动调整大小随着窗口的宽度增长随着窗口的高度而增长为标签和文本区域添加了.col，以正确并排对齐，并为行添加了居中对齐 .col{ float:left; padding-right:10px;

我有两个带标签的文本区域（）：


标题
标签1
文本区域1
标签2
文本区域2

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

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

编辑：文本区域应

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

为

标签

和

文本区域

添加了

.col

，以正确并排对齐，并为

行

添加了

居中对齐

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

label, textarea{
    width:100%;
}

.row {
    display:inline-block;
}

编辑

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

我找到了一个使用

calc

的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>

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

我发现了另一个使用flexible box layout（）的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>

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

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

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