的CSS DIV高度动态内容

Question

<div>Text here</div> 

/出租宽度过渡说我有它一个文本框一个div，我想股利顺利使高度/宽度转换为我输入更多的文字，并且换行。有没有简单的方法来做到这一点与css没有涉及Javascript的转换？

如何编辑文本？ Javascript或AJAX调用。

Answer 1

最简单的方法来获得一个可以在您键入时展开的框是contenteditable属性。

<div contenteditable>Type here...</div> 

Here是一个示范。

尽管如此，我并不认为可以将文本输入到contenteditable元素中，从而实现平滑，渐进的过渡效果。在动态元素高度上的过渡已经非常困难，因为缺少浏览器对转换height: auto和百分比高度的支持。

很遗憾，您所寻找的过渡效果很可能需要JavaScript，除非有人提出了一个非常聪明的CSS解决方案。

Answer 2

聪明的解决方案，尽管有警告：

1. 你必须知道的高度，你可以设置在一开始（0将工作）
2. 没有完全干净。

使用最大高度而不是高度。从小的东西开始，无论div内容的默认高度如何，然后将其设置为相当高的值，因为它只会展开以匹配您的内容。你可能也会想要溢出：隐藏，所以你可以看到屏蔽，因为它转换。

.test{ 
    overflow: hidden; 
    transition: 1s linear; 
} 
.test.begin{ 
    max-height: 15px; 
} 
.test.end{ 
    max-height: 400px; 
} 

请注意，动画速度是基于最高高度之间的差异。即使你只在1秒内动画超过100px的内容，展示速度也会像在1秒内动画超过385px一样。

编辑：我还没有过我的早晨咖啡还，但你肯定不希望，你知道...

<textarea> 

？