的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> 

？