如何让包含textarea的div随着textearea变化大小

在div里面的textarea缩放时会超出div的大小但是div不会随着相应的变化如何实现div随着textarea缩放也缩放的功能呢？

不要浮动，不要固定高宽，自然就自增长了

添加一个resize的事件监听，当触发resize的时候，相应改变div的大小

$("textarea").resize(function(){
  $("div").height($("textarea").height())
  $("div").width($("textarea").width())
})

在不设置width和height的情形下，div的宽度是100%，自适应于div的外层容器，而高度自适应于内部的内容。什么时候外层div会在宽度上自动包裹内层呢? 以下属性可以触发：

float:left/right
position:absolute/fixed
display:inline-block/table-cell/table

前提是，div的宽度为auto。

假设所有的浏览器都按W3C标准来渲染，有些属性依然存在副作用。

（textarea的resize属性是css3中定义的，IE系列至今未兼容。所以非标准浏览器也不在问题范畴内。）

float属性会导致该div对外部容器的高度塌陷，清除浮动可以做到
absolute/fixed定位会导致div对外部容器的高度塌陷

例子：

<div class="out">
    <div class="in">
        <textarea></textarea>
    </div>
</div>

↑ 没有做处理的情形

↑ inline-block/table/table-cell方法

↑ float方法（未做清除浮动）,position:abosolute/fixed造成的效果也一样

更新：

经试验，display:table/table-cell也能达到效果。

不知道这个是不是你想要的

//html
<div class="box">
    <textarea name="xx" ></textarea>
</div>

//css
.box {
    overflow:hidden;
    border:1px solid #ccc;
    display:inline-block;
    *zoom:1;
    *display:inline;
}
.box textarea {
    border:1px solid #eee;
    float:left; /* IE下间距bug */
}

【热门文章】