#html #css #text #textarea #height
#HTML #CSS #текст #текстовая область #высота
Вопрос:
Можно ли автоматически настроить высоту в соответствии с высотой содержимого, используя только css, без использования javascript?
Например, когда высота составляет 200 пикселей, когда текст внутри написан всего на 100 пикселей в высоту, я надеюсь, что там не будет пустого места.
Я хочу, чтобы высота текста внутри влияла на высоту самого текста. Существует способ использовать 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'; } lt;div class="code-wrap"gt; lt;div class="code-title"gt;lt;pgt;Resultlt;/pgt;lt;/divgt; lt;div class="area-wrap"gt; lt;textarea rows="15" cols="50" name="quiz-editor" id="mainResultArea" class="ed-result" readOnly gt; lt;/textareagt; lt;/divgt; lt;/divgt; Комментарии:
1. К вашему сведению: Изменено
classNameв вашем HTMLclass, чтобы фрагмент выглядел лучше.
Ответ №1:
К сожалению, насколько мне известно, нет лучшего способа сделать это с помощью необработанного CSS или HTML. Однако вы можете отклониться от textarea элемента и использовать contentEditable атрибут для div или текстового элемента.
Ознакомьтесь с этим основным примером и напишите в этом текстовом поле пример:
div { border: solid 1px; padding: 5px; width: 300px; min-height: 50px; overflow: auto; } lt;div contentEditablegt;lt;/divgt;