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

Posted 2023-03-05

【中文标题】响应式表单 - 控制文本区域的高度

【英文标题】：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/）

如何解决这个问题？

【问题讨论】：

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

【参考方案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;”它会起作用的