Question

我有 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/

基本上它是三个文本输入字段，一个textarea和一个提交按钮（aka输入类型提交）。到达断点时，表单将进入两列布局。这是正在发挥作用的部分。

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

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

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

如何解决这个问题？

Answer 1

只有手动将高度赋予textarea才能实现。所以在媒体查询时给textarea提供高度。

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

Answer 3

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

响应形式 - 控制textarea的高度

3 个答案: