Ich möchte die Höhe der Textarea gleich der Höhe des Textes darin machen (und die Bildlaufleiste entfernen)
HTML
<textarea id="note">SOME TEXT</textarea>
CSS
textarea#note {
width:100%;
direction:rtl;
display:block;
max-width:100%;
line-height:1.5;
padding:15px 15px 30px;
border-radius:3px;
border:1px solid #F7E98D;
font:13px Tahoma, cursive;
transition:box-shadow 0.5s ease;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
font-smoothing:subpixel-antialiased;
background:linear-gradient(#F9EFAF, #F7E98D);
background:-o-linear-gradient(#F9EFAF, #F7E98D);
background:-ms-linear-gradient(#F9EFAF, #F7E98D);
background:-moz-linear-gradient(#F9EFAF, #F7E98D);
background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}
JsFiddle:
Es kann mit JS erreicht werden. Hier ist eine 'einzeilige' [Lösung][1] mit elastic.js:
$('#note').elastic();
Aktualisiert: Anscheinend gibt es elastic.js nicht mehr, aber wenn Sie eine externe Bibliothek suchen, kann ich autosize.js von Jack Moore empfehlen. Dies ist das funktionierende Beispiel:
autosize(document.getElementById("note"));
textarea#note {
width:100%;
box-sizing:border-box;
direction:rtl;
display:block;
max-width:100%;
line-height:1.5;
padding:15px 15px 30px;
border-radius:3px;
border:1px solid #F7E98D;
font:13px Tahoma, cursive;
transition:box-shadow 0.5s ease;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
font-smoothing:subpixel-antialiased;
background:linear-gradient(#F9EFAF, #F7E98D);
background:-o-linear-gradient(#F9EFAF, #F7E98D);
background:-ms-linear-gradient(#F9EFAF, #F7E98D);
background:-moz-linear-gradient(#F9EFAF, #F7E98D);
background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>
Prüfen Sie auch diese ähnlichen Themen:
https://stackoverflow.com/questions/7477/autosizing-textarea-using-prototype
https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
Ich sehe, dass dies bereits beantwortet ist, aber ich glaube, ich habe eine einfache jQuery-Lösung (jQuery ist nicht einmal wirklich erforderlich; Ich genieße es einfach verwenden):
Ich schlage vor, die Zeilenumbrüche im Text des "Textareas" zu zählen und das Attribut "rows" des "Textareas" entsprechend zu setzen.
var text = jQuery('#your_textarea').val(),
// look for any "\n" occurences
matches = text.match(/\n/g),
breaks = matches ? matches.length : 2;
jQuery('#your_textarea').attr('rows',breaks + 2);
[Jsfiddle][1]
textarea#note {
width:100%;
direction:rtl;
display:block;
max-width:100%;
line-height:1.5;
padding:15px 15px 30px;
border-radius:3px;
border:1px solid #F7E98D;
font:13px Tahoma, cursive;
transition:box-shadow 0.5s ease;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
font-smoothing:subpixel-antialiased;
background:-o-linear-gradient(#F9EFAF, #F7E98D);
background:-ms-linear-gradient(#F9EFAF, #F7E98D);
background:-moz-linear-gradient(#F9EFAF, #F7E98D);
background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
background:linear-gradient(#F9EFAF, #F7E98D);
height:100%;
}
html{
height:100%;
}
body{
height:100%;
}
oder javascript
var s_height = document.getElementById('note').scrollHeight;
document.getElementById('note').setAttribute('style','height:'+s_height+'px');
[Jsfiddle][2]