textarea 高度不会增加以匹配表格单元格高度答案

【问题标题】：textarea height does not increase to match table cell heighttextarea 高度不会增加以匹配表格单元格高度
【发布时间】：2012-12-27 16:29:24
【问题描述】：

我有一个文本区域，可以放入一个名为.question 的表格单元格中。现在我遇到的问题是，如果表格单元格的高度扩大到增加的高度，则 textarea 的高度不会增加，因此在顶部表格单元格边框和 textarea 边框顶部之间留下一个间隙，它也会在在 textarea 的下边框和表格单元格的下边框之间。

如果表格单元格的高度足够低，那么看起来 textarea 已经填满了表格单元格的高度。

但我的问题是，无论表格单元格的高度是否已更改，文本区域都应始终填充表格单元格的高度。我的问题是，我怎样才能改变下面的 css、HTML 和 jquery 来做到这一点？

css:

    .question { 
        max-width:0.1%;
        border:1px black solid;
        border-collapse:collapse;
        line-height: 0;
    }

    .question textarea {
        width:auto;
        resize:none;
        height:100%;
        font-size:100%;
        display: block; 
        overflow:auto;

    }

jquery：

function setWidth() {
    var questionCellHeight = $("#qandatbl_onthefly tbody .question").height();
    $(".textAreaQuestion").css({
        "height": (questionCellHeight) + "px"
    });
}

HTML 表格：

<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
    <th class="question">Question</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container">
<table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr class='optionAndAnswer' align='center'>
<td class='question'>
<textarea class='textAreaQuestion'></textarea>
</td>
</tr>
</tbody>
</table>

更新：

我将 .question textarea 更改为 .textAreaQuestion 并删除了 height 属性的 css 略有更新：

.textAreaQuestion{
    resize:none;
    font-size:100%;
    display: block; 
    overflow:auto;
}

我认为需要编辑jquery，以便如果表格单元格增加，它将文本区域的高度增加到与增加的表格单元格相同的高度。（意见）

【问题讨论】：

您的代码中似乎有一些错误。您的 css 引用 questionTextArea 但您的 HTML 类名称是 textAreaQuestion。但是，您还尝试使用.question textarea 将其风格化？然后你也尝试用JS设置宽度？
@DigTheDoug 抱歉问题TextArea 不应该在上面的css 中，那是针对不同的textarea 类，我将其删除。我假设您希望我从 .question textarea 中删除高度和宽度 css 元素，并将 .question textarea 更改为 textAreaQuestion？
好吧，试图找出错误所在的问题（不仅对我而言，而且在您调试时也是如此）是您有太多可能会影响它的代码。首先将其修剪为该元素上的一种类样式，然后从那里查看您得到了什么。这也适用于 Javascript，我会删除它，直到您认为您绝对需要它，因为您可能不需要它来执行此操作。我通常使用 Chrome 的开发人员工具来实时更改元素的样式，以查看是否可以隔离问题或在将问题提交到样式表之前即时修复它。
@DigTheDoug 这绝对是我需要改变的jquery才能解决这个问题。 jquery 尽最大努力增加 textarea 的高度，即使如果表格单元格从原始大小增加它不会这样做，但它确实设法让 textarea 填充原始表格单元格的高度。如果没有 jquery，即使在 css 中我声明了 height:100%，textarea 也不会填充表格单元格的高度。我已经包含一个更新以显示 css 更改为 .textAreaQuestion 而不是 .question textarea 并从 css 中删除 height 属性，但目前它仍在做同样的事情。
@DigTheDoug 我不知道它是否可能，但是在 jquery 中有没有办法声明如果表格单元格增加，将 textarea 的高度增加到与表格单元格相同的高度？这可能是解决问题的方法。

标签： jquery html css

【解决方案1】：

如果您只想再次调用 jQuery 函数，请尝试将 $(".gridBtns").click(setWidth); 之类的内容添加到处理 Grid 的任何内容中。

恐怕我不确切知道您需要什么，因为要了解的信息太多或太少。尝试缩小您的问题范围，并将问题放在 jsfiddle 中。之前有人问你的时候，你做了相反的事情。您只是不断添加代码来复制您的问题。

附带说明，请停止使用tables 进行布局，这就是divs 的用途。

【讨论】：