自動計算div的高度

Question

我需要計算content div的高度並將其應用於wrapper div。

我有腳本，這里確實如此，但問題是，我有自動增長text-area里面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>

演示

PS：我不能更改position:absolute .Content div的position:absolute

Answer 1

請在調整大小功能中添加以下行

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

Answer 2

您需要在textarea上添加keypress功能並計算其變化的高度

 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

很簡單：

此處演示

向.content類添加10px的padding ，例如padding:10px 。 然后對.wrapper和.content使用autogrow功能，如下所示：

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