2

テキストエリアと、そのテキストエリアを保持する 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%;

しかし、それは機能しません。float プロパティが問題を引き起こしていることがわかりますが、float プロパティで機能させる方法がわかりません。

デモはこちら

4

1 に答える 1

3

これは、 内の要素divが両方ともフローティングであるため、ブラウザーが親の高さを計算するためのドキュメント フローの一部ではないためです。簡単な回避策はoverflow: hidden、親コンテナーに設定することです。

フィドルの例

于 2012-11-28T14:56:13.087 に答える