Question

我需要计算content div高度并将其应用于wrapper div。

我有脚本执行此操作，但问题是，我在text-area div内自动增长content，在键入时动态增加text-area和content高度内部。

如何自动将增长的div高度应用于wrapper div。我希望wrapper div也与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：我无法更改position:absolute div

的.Content

Answer 1

请在调整大小功能中添加以下行

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

Answer 2

您需要在keypress上添加textarea函数，并在更改时计算高度

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>

Answer 3

这很简单：

<强> DEMO HERE

将padding 10px .content添加到padding:10px类autogrow。然后对.wrapper和.content使用$('.content').autogrow({onInitialize:true}); $('.wrapper').autogrow({onInitialize:true});功能，如下所示：

{{1}}

div的自动高度计算

3 个答案: