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

vicvinc
  • 253

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

回复
阅读 13.2k
4 个回答
Humphry
  • 16.4k
✓ 已被采纳

在不设置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方法

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

float方法

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

更新:

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

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

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

$("textarea").resize(function(){
  $("div").height($("textarea").height())
  $("div").width($("textarea").width())
})
大大大大志
  • 57

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

//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 */
}
宣传栏