Auto height calculation of div

Question

I need to calculate the content div height and apply it to the wrapper div.

I have script which does that but the problem here is, I have auto grow text-area inside the content div which increases the text-area and content height dynamically while typing inside.

How do I automatically apply the grown div height to the wrapper div. I want wrapper div also to grow along with content div.

<div class="wrapper">
   <div class="content">
     <p>lorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sifgfgfgfgfgfgfgfgfgtlorem ipsum elit sitlorem ipsum elit dfdfdfdfdfdfdsitlorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sitlore
       <textarea></textarea>
     </p>
   </div>
  </div>

DEMO

P.S: I can not change the position:absolute of the .Content div

Answer 1

Please add below lines in resize function

    var contentHeight = box.parents(".content").height();
    $(".wrapper").css({"min-height":contentHeight+40});

Answer 2

It's very simple:

DEMO HERE

add a padding of 10px to your .content class like padding:10px. and then use your autogrow function for both .wrapper and .content as below:

$('.content').autogrow({onInitialize:true});
$('.wrapper').autogrow({onInitialize:true});

Answer 3

You need to add a keypress function on the textarea and calculate the height as it changes

var divHeight = $('.content').height(); 
$('.wrapper').css('min-height', divHeight+40+'px');
$('textarea').keypress(function(){
    var divHeight = $('.content').height();
$('.wrapper').css('min-height', divHeight+40+'px');
})

//Textarea autogrow
;(function($){    
    //pass in just the context as a $(obj) or a settings JS object
    $.fn.autogrow = function(opts) {
        var that = $(this).css({overflow: 'hidden', resize: 'none'}) //prevent scrollies
            , selector = that.selector
            , defaults = {
                context: $(document) //what to wire events to
                , animate: true //if you want the size change to animate
                , speed: 200 //speed of animation
                , fixMinHeight: true //if you don't want the box to shrink below its initial size
                , cloneClass: 'autogrowclone' //helper CSS class for clone if you need to add special rules
                , onInitialize: false //resizes the textareas when the plugin is initialized
            }
        ;
        opts = $.isPlainObject(opts) ? opts : {context: opts ? opts : $(document)};
        opts = $.extend({}, defaults, opts);
        that.each(function(i, elem){
            var min, clone;
            elem = $(elem);
            //if the element is "invisible", we get an incorrect height value
            //to get correct value, clone and append to the body. 
            if (elem.is(':visible') || parseInt(elem.css('height'), 10) > 0) {
                min = parseInt(elem.css('height'), 10) || elem.innerHeight();
            } else {
                clone = elem.clone()
                    .addClass(opts.cloneClass)
                    .val(elem.val())
                    .css({
                        position: 'absolute'
                        , visibility: 'hidden'
                        , display: 'block'
                    })
                ;
                $('body').append(clone);
                min = clone.innerHeight();
                clone.remove();
            }
            if (opts.fixMinHeight) {
                elem.data('autogrow-start-height', min); //set min height                                
            }
            elem.css('height', min);
            
            if (opts.onInitialize && elem.length) {
                resize.call(elem[0]);
            }
        });
        opts.context
            .on('keyup paste', selector, resize)
        ;
    
        function resize (e){
            var box = $(this)
                , oldHeight = box.innerHeight()
                , newHeight = this.scrollHeight
                , minHeight = box.data('autogrow-start-height') || 0
                , clone
            ;
            if (oldHeight < newHeight) { //user is typing
                this.scrollTop = 0; //try to reduce the top of the content hiding for a second
                opts.animate ? box.stop().animate({height: newHeight}, opts.speed) : box.innerHeight(newHeight);
            } else if (!e || e.which == 8 || e.which == 46 || (e.ctrlKey && e.which == 88)) { //user is deleting, backspacing, or cutting
                if (oldHeight > minHeight) { //shrink!
                    //this cloning part is not particularly necessary. however, it helps with animation
                    //since the only way to cleanly calculate where to shrink the box to is to incrementally
                    //reduce the height of the box until the $.innerHeight() and the scrollHeight differ.
                    //doing this on an exact clone to figure out the height first and then applying it to the
                    //actual box makes it look cleaner to the user
                    clone = box.clone()
                        //add clone class for extra css rules
                        .addClass(opts.cloneClass)
                        //make "invisible", remove height restriction potentially imposed by existing CSS
                        .css({position: 'absolute', zIndex:-10, height: ''}) 
                        //populate with content for consistent measuring
                        .val(box.val()) 
                    ;
                    box.after(clone); //append as close to the box as possible for best CSS matching for clone
                    do { //reduce height until they don't match
                        newHeight = clone[0].scrollHeight - 1;
                        clone.innerHeight(newHeight);
                    } while (newHeight === clone[0].scrollHeight);
                    newHeight++; //adding one back eliminates a wiggle on deletion 
                    clone.remove();
                    box.focus(); // Fix issue with Chrome losing focus from the textarea.
                    
                    //if user selects all and deletes or holds down delete til beginning
                    //user could get here and shrink whole box
                    newHeight < minHeight && (newHeight = minHeight);
                    oldHeight > newHeight && opts.animate ? box.stop().animate({height: newHeight}, opts.speed) : box.innerHeight(newHeight);
                } else { //just set to the minHeight
                    box.innerHeight(minHeight);
                }
            } 
        }
        return that;
    }
})(jQuery);
$('textarea').autogrow({onInitialize: true});

.wrapper{
  background:#f90;
  position:relative;
  height:auto;
    margin:10px
}
.content{
  background:#DCFFC8;
   margin:10px;
  position:absolute;
  top:0; left:0
}

textarea { margin: 1em; outline: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
   <div class="content">
     <p>lorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sifgfgfgfgfgfgfg fgfgt lorem ipsum elit sitlorem ipsum elit dfdfdfdfdfdfdsitlorem ipsum elit sitloreit sitlorem ipsum elit sifgfgfgfgfgfgfg fgfgt lorem ipsum elit sitlorem ipsum elit dfddipsum elit sitlorem ipsum elit dfdfdfdfdfdfdsitlorem ipsum elit sitloreit sitlorem ipsum elit sifgfgfgfgfgfgfg f dfdfdfdfdfdfdsitlorem ipsum elit sitloreit sitlorem ipsum elit sifgfgfgfgfgfgfg fgfgt lorem ipsum elit sitlorem ipsum elit dfdfdfdfdfdfdsitlorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sitlore </p>
      
     <div><textarea></textarea></div>
   </div>
  </div>