响应式表单 - 控制文本区域的高度答案

【问题标题】：Responsive form - controlling height of a textarea响应式表单 - 控制文本区域的高度
【发布时间】：2013-01-09 12:08:55
【问题描述】：

我有这个 HTML 表单：

<form method="post" action="#" class="cf">
    <div class="left">
        <label for="first-name">First Name</label>
        <input type="text" name="first-name" placeholder="First Name" id="first-name" required />
        <label for="last-name">Middle Name</label>
        <input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
        <label for="last-name">Last Name</label>
        <input type="text" name="last-name" placeholder="Last Name" id="last-name" required />
    </div>
    <div class="right">
        <label for="details">Details</label>
        <textarea name="details" placeholder="Details" id="details" required></textarea>
    </div>
    <input type="submit" name="submit" value="Submit Form" />
</form>

这是我的 CSS：

/* Clearfix */
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }

form > * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.left {
    background: rgba(255, 0, 0, .2);
}

.right {
    background: rgba(0, 255, 0, .2);
}

form {
    background: #ccc;
}

input[type="text"],
textarea {
    width: 100%;
    border: none;
}

input[type="text"] {
    margin-bottom: 10px;
}

label {
    display: inline-block;
    margin-bottom: 5px;
}

@media only screen and (min-width: 600px) {
    form {
        background: rgba(0, 0, 255, .3);
    }

    .left {
        float: left;
        width: 50%;
    }

    .right {
        float: right;
        width: 50%;
    }

    input[type="submit"] {
        clear: both;
    }
}

小提琴
http://jsfiddle.net/gRRmh/

基本上它是三个文本输入字段，一个文本区域和一个提交按钮（又名输入类型提交）。到达断点时，表单会变成两列布局。这就是起作用的部分。

不工作的部分是文本区域的高度。我希望它与左侧的三个输入字段的高度相同。
将其设置为 height: 100%; 不起作用有两个原因：

需要考虑标签的高度。当然，我可以给它一个百分比高度，然后从 textarea 的高度中减去该值（10% / 90%）...
...但是要使其正常工作，一个父元素需要一个固定的高度，所以我需要给出表格，例如高度为 200 像素。问题是我实际上需要手动匹配左列的高度，这并不是一个好的解决方案。

所以我真正在寻找的是类似下面的东西，只是没有手动轻推像素：（如果您愿意，也可以使用小提琴，但请注意：它有点乱。http://jsfiddle.net/mnBEh/1/）

如何解决这个问题？

【问题讨论】：

文本区域一旦破裂并在下方流动，您是否可以接受它的缩小尺寸，或者您仍然希望文本区域的高度与输入部分匹配？

标签： html css forms textarea alignment

【解决方案1】：

只有通过手动为 textarea 指定高度才能实现。所以在媒体查询中为 textarea 指定高度。

【讨论】：

【解决方案2】：

试试这个。它使用 CSS 表格，但我认为它可以通过将 textarea 设置为 100% 高度，然后减去它的标签高度来获得您正在寻找的结果。但是由于某种原因，高度仅在 Chrome 中正确计算，即使其他浏览器应该支持它。 http://jsfiddle.net/73cyorL1/

CSS：

.table {
    display: table;
    width: 100%;
}
.row {
    display:table-row;
    width: 100%;
}
.left {
    background: red;
}
.right {
    background: blue;
}
label {
    display: block;
    padding: 10px;
    font-family: arial;
    font-style: italic;
    font-size: 0.75em;
    line-height: 1em;
}
form {
    background: grey;
}
input[type="text"], textarea {
    width: 100%;
    border: none;
    background: #ccc;
    font-family: arial;
    padding: 10px;
    box-sizing: border-box;
    display: block;
}
input[type="text"]:focus, textarea:focus {
    outline: 0;
    background: #ddd;
}
input[type="submit"] {
    display: block;
    margin: 10px;
    padding: 10px;
    cursor: pointer;
}
@media only screen and (min-width: 600px) {
    .left {
        width: 50%;
        height: 100%;
        display: table-cell
    }
    .right {
        width: 50%;
        height: 100%;
        display: table-cell;
        overflow: hidden;
    }
    textarea {
        height: calc(100% - 0.75em);
        /* 100% fill height, minus height of details label */
    }
}

HTML：

<form method="post" action="#" class="table">
    <div class="row">
        <div class="left">
            <label for="first-name">First Name</label>
            <input type="text" name="first-name" placeholder="First Name" id="first-name" required="required" />
            <label for="last-name">Middle Name</label>
            <input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
            <label for="last-name">Last Name</label>
            <input type="text" name="last-name" placeholder="Last Name" id="last-name" required="required" class="last" />
        </div>
        <div class="right">
            <label for="details">Details</label>
            <textarea name="details" placeholder="Details" id="details" required></textarea>
        </div>
    </div>
    <input type="submit" name="submit" value="Submit Form" />
</form>

【讨论】：

【解决方案3】：

设置“box-sizing:border-box;”它会起作用的

【讨论】：