Auto Height Calculation Of Div

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 di

Solution 1:

Please add below lines in resize function

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

Solution 2:

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)
        ;
    
        functionresize (e){
            var box = $(this)
                , oldHeight = box.innerHeight()
                , newHeight = this.scrollHeight
                , minHeight = box.data('autogrow-start-height') || 0
                , clone
            ;
            if (oldHeight < newHeight) { //user is typingthis.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);
            } elseif (!e || e.which == 8 || e.which == 46 || (e.ctrlKey && e.which == 88)) { //user is deleting, backspacing, or cuttingif (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 clonedo { //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; }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="wrapper"><divclass="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>

Solution 3:

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});