Question

这个问题是我的 previous question 的续集，其中我可以得到部分答案。

我需要计算content div高度，并根据textarea自动扩展将其应用于wrapper div。

现在扩展主div正在工作，但当我删除wrapper div的内容时，textarea/content div高度没有相应减少。那是因为默认情况下我正在计算content div的高度但不重置它。下面的行就是那个

var divHeight = $('.content').height(); 
$('.wrapper').css('min-height', divHeight+40+'px');

如何让它自动调整wrapper div。

的高度

DEMO Here

Answer 1

一种解决方案是不使用position:absolute元素。

所以你的主要问题是你的.content设置为position:absolute 由于绝对定位，您需要动态检索更改的高度，以便将其应用于父DIV。

另一个解决方案：

<强> jsFiddle demo

var $content  = $('.content'), // Cache your selectors for a better performance
    $wrapper  = $('.wrapper'),
    $textarea = $("textarea");

function setContentHeight() {
    $wrapper.css('min-height', $content.height() + 40 );
}

$textarea.on("input change", function() { 
    $(this).height(1).height( this.scrollHeight ); // manipulate textarea height
    setContentHeight();
}).change();                                       // Trigger

// When do we need to reflect .content height?
setContentHeight();                                // Immediately
$(window).on("resize", setContentHeight);          // and on win resize

.wrapper{
  background:#f90;
  position:relative;
}
.content{
  background:#DCFFC8;
  margin:10px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:10px;
}
textarea{
  outline:none;
  resize: horizontal;
}

<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...
    </p>
    <div>
      <textarea></textarea>
    </div>
  </div>
</div>

Answer 2

向插件的.animate函数添加回调并从那里执行调整大小。（同时从.kepress事件中删除调整大小代码）

box.stop().animate({
    height: newHeight
}, opts.speed,
function () {
    var divHeight = $('.content').height();
    $('.wrapper').css('min-height', divHeight + 40 + 'px');
})

http://jsfiddle.net/mnawkgqL/10/

Answer 3

更改CSS文件您的问题已解决

.wrapper{
  background:#f90;

}
.content{
  background:#DCFFC8;
   margin:10px;

  top:0; left:0; padding:10px
}

textarea { outline: none; }

查看它：https://jsfiddle.net/mnawkgqL/9/embedded/result/

根据子绝对div调整父div高度

3 个答案: