如何仅使用 css 不使用 javascript 将 <textarea> 高度自动调整为内部文本的高度？答案

【问题标题】：How to automatically adjust the <textarea> height to the inner text's height using only css without using javascript?如何仅使用 css 不使用 javascript 将 <textarea> 高度自动调整为内部文本的高度？
【发布时间】：2022-01-13 22:34:37
【问题描述】：

是否可以仅使用css而不使用javascript自动将高度调整为内容的高度？

例如，当高度为200px时，当里面的文字只写100px的高度时，我希望不要有空格。

我希望内部文本的高度影响自身的高度。有办法在整个互联网上使用 javascript。但我想只使用 css 和 html 来实现它。我需要帮助！

这是我的代码。

.code-wrap {
    margin-top: 8px;
    border-radius: 8px;
    background: #1e1e1e;
    max-height: 400px;
}

.code-title {
    border-radius: 8px 8px 0 0;
    background: #242E64;
    padding: 21px 24px;
}

.area-wrap {
    padding: 21px 24px;
}

textarea {
    border: 0;
    resize: none;
    width: 100%;
    height: 300px;
    outline: none;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    background: none;
    font-family: 'D2Coding';
}

<div class="code-wrap">
    <div class="code-title"><p>Result</p></div>
    <div class="area-wrap">
       <textarea
            rows="15"
            cols="50"
            name="quiz-editor"
            id="mainResultArea"
            class="ed-result"
            readOnly
          >
          </textarea>
    </div>
</div>

【问题讨论】：

仅供参考：将 HTML 中的 className 更改为 class，因此 sn-p 看起来更好。

标签： html css text textarea height

【解决方案1】：

不幸的是，据我所知，使用原始 CSS 或 HTML 并没有很好的方法来做到这一点。但是，您可以远离 textarea 元素，而在 div 或 text 元素上使用 contentEditable 属性。

查看此基本示例并在此示例文本框中写入：

div {
    border: solid 1px;
    padding: 5px;
    width: 300px;
    min-height: 50px;
    overflow: auto;
}

&lt;div contentEditable&gt;&lt;/div&gt;

【讨论】：