Textarea dynamisch vergrößern und Position div.

Question

Ist möglich abnahme klasse = "Inhalt" bei steigender Textfläche?

$('textarea').on({input: function(){ 
 
    var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom')); 
 
    $(this).css({'height':totalHeight}); 
 
} 
 
});

.OuterDiv 
 
{ 
 
    width:200px; 
 
    height:300px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    } 
 
.Content 
 
{ 
 
    width:200px; 
 
    max-height:250px; 
 
    background-color:grey; 
 
    overflow:auto; 
 
    } 
 
.text 
 
{ 
 
    resize:none; 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    width:194px; 
 
    min-height:43px; 
 
    max-height:145px; 
 
    background-color:rgba(250, 120, 30,1); 
 
    font-size:16px; 
 
    font-family:Arial; 
 
    overflow:auto; 
 
    word-wrap:break-word; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="OuterDiv"> 
 
    <div class="Content">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker 
 
    
 
    </div> 
 
    <textarea class="text" placeholder="Write some text..."></textarea> 
 
</div>

möglich ist dynamisch Höhe TextArea- erhöhen und einmal class = "Content" verringern

Answer 1

$('textarea').on('input', function() { 
    $(this).outerHeight(0); // reset height to reinitialize scrollHeight 
    var scrollHeight = parseInt($(this).prop('scrollHeight')); 
    $(this).height(scrollHeight); 
    $(this).prev('.Content').outerHeight(300 - $(this).outerHeight()); 
}); 

https://jsfiddle.net/81vuv33j/

(Ich habe hilft die CSS ein wenig vereinfacht, da es eine Menge von nicht relevanten Daten für diese Frage zu sein scheint . Lassen Sie mich wissen, wenn ich etwas relevant)

jQuery Docs verpasst haben:

• .height()
• .outerHeight()
• .innerHeight()

Answer 2

Nicht sicher (Bildlaufleiste in class = "Content" machen), was genau Sie sind Suche

Von dem, was ich verstehe, ist es das, was ich

Überprüfung dieser Ausschnitt machen könnte

.OuterDiv { 
 
    width: 200px; 
 
    height: 300px; 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    padding: 5px; 
 
    overflow: hidden; 
 
} 
 
.Content { 
 
    width: 200px; 
 
    height: 150px; 
 
    background-color: grey; 
 
    overflow: scroll; 
 
    position: relative; 
 
} 
 
.Content textarea { 
 
    resize: none; 
 
    width: 100%; 
 
    height: 250px; 
 
    background: blue; 
 
}

<div class="OuterDiv"> 
 
    <div class="Content"> 
 
    <textarea class="text" placeholder="Write some text..."> 
 
     this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text 
 
     this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is 
 
     the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text 
 
     this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is 
 
     the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text 
 
     this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is 
 
     the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text 
 
     this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text this is the text 
 
    </textarea> 
 

 
    </div>

Hope it