自动增长 textarea 容器不根据 textarea 大小调整大小

Question

我有 textarea 和一个存放该 textarea 的 DIV 容器。

<div class="holder">
    <div style="float:left;">
        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc6/211204_417552211638405_1828134258_q.jpg">
    </div>
    <div style="float:left;">
        <textarea class="grow" row="5" cols="20"></textarea>
    </div>
</div>

我正在使用自动增长插件。

$(document).ready(function(){
  $(".grow").autogrow();  
});

当 textarea 根据内容调整大小时，容器 div 不会相应扩展。 我尝试添加

Height: 100%;

但这不起作用，我看到它的浮动属性导致问题，但我不知道如何使它与浮动属性一起工作。

Demo Here

Answer 1

这是因为div 中的元素都是浮动的，因此它们不是浏览器计算父级高度的文档流的一部分。快速的解决方法是在父容器上设置overflow: hidden。

Example fiddle