Question

我试图将textarea高度设置为100％，而不会增加父表行的高度。

请参阅this fiddle。

您可以看到只有输入的行是正确的高度，只有文本的行是正确的高度，但带有textarea的行太高了。

我告诉textarea 100％是父母的身高。我期望textarea获得行高，并将其自身设置为。相反，它将自己的高度设置为它想要的任何高度，然后将行设置为textarea的高度，使其为100％，而不是＆＃34;对等＆＃34; 100％！

我可以在textarea上设置max-height，这样可行，但它会阻止用户使textarea更高。

Answer 1

这里有一些让你无法实现自己想要的东西。

<强> 1）

您为min-height: 26px;设置的textarea大于为表格单元格设置的高度。从CSS中删除它。

<强> 2）

textarea的顶部和底部有5px的填充，实际上增加了10px的空间。将这些更改为0px，您会注意到更改。

第3）

textarea的高度也取决于rows的数量。将rows="1"添加到文本区域，它应该就位。

<强> 4）

我之前忘记了这一点，同时将valign="top"添加到包含<td>的{{1}}，textarea将其保留在单元格中，而不是具有1-2px的超额...我和＃39 ;更新了显示这一点的小提琴。

修改：由于有人指出{@ 1}}已被弃用，您还可以在valign上使用vertical-align: text-top; td

以下是变化的小提琴：http://jsfiddle.net/38GAX/1/

Answer 2

这样做：

textarea {
    -moz-box-sizing: border-box;
    background: none;
    border: 2px solid #55CCEE;
    color: #646464;
    height:100%;
    min-height:26px;
    width:100%;
    min-width:180px;
    padding:5px 11px 5px 10px;
    display:block // <-- this is the line I added

}

看起来Chrome和Firefox会将textarea设置为display:inline-block;。请改用display:block。

来源：How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?

Answer 3

您可以做的另一件事是应用否定的margin。

所以添加

textarea {
    ...
    margin-bottom:-4px;
    ...
}

http://jsfiddle.net/mCPRX/15/

Textarea高度100％，不增加父表行的高度？

3 个答案: