如何將Textarea擴展爲僅使用CSS的100％

我有一個textarea標記，其中包含我希望用戶編輯的文本。 textarea的標籤被包裹一個div內，像這樣：如何將Textarea擴展爲僅使用CSS的100％

div.container { 
    width: 295px; 
    max-height: 250px; 
    overflow: auto; 
    position: relative; 
    border: 1px solid: #EEEEEE; 
} 
textarea { 
    width: 270px; 
    height: 100%; 
    resize: none; 
    overflow: hidden; 
    border: none; 
} 

<div class="container"> 
    <textarea id="overview"> 
     blah blah.... 
    </textarea> 
</div>

的div有一個固定的寬度，最大高度，並顯示滾動條時的高度過大。所有這些都很好，但我怎樣才能讓textarea擴展到100％？它目前只有兩條線，並且在我有很多文字時不會展開以顯示所有文字。 Please see this fiddle to see what I'm talking about.

來源

2011-10-24 Halcyon

你的最終目標究竟是什麼？你在尋找一個靈活的文本區域，你想要滾動嗎？我想我不明白爲什麼你不會將你想要的樣式應用到'textarea'本身。 – egid

您的div.container需要指定一個明確的高度。子內容不會擴大到max-height，只是height。

事情是這樣的： http://jsfiddle.net/dpF7k/ 或者更簡單地直接應用到textarea的，而不是包裝的div：http://jsfiddle.net/ujKCf/

是唯一缺少的是，它不收縮低於250像素，如果含量較少。

來源

2011-10-24 22:00:36

我使用了最大高度，因爲內容是動態的。如果textarea的內容超過250px，我希望div使用滾動條顯示textarea的文本。 – Halcyon

問題是max-height會很好，但在填充之前它不會做任何事情。請參閱[@ Karl的評論]（http://stackoverflow.com/questions/7882402/how-to-expand-a-textarea-to-100-using-css-only/7882522#7882522）。 – egid

感謝您的洞察力。在測試完這些之後，我決定使用jQuery，並在頁面加載完成後將textarea擴展到我需要的高度，從而解決了問題。 – Halcyon

textarea的只能擴大大如div#container

當你設置你的容器是max-height: 250px，除非有推它，它不會擴展到該尺寸。由於你的textarea是100％，它只是使用任何可用的。

要看我的意思，只需將容器設置爲height: 250px而不是max-height。

來源

2011-10-24 22:00:44 Karl

我可以將textarea的高度設置爲3000px，並將其展開以顯示所有文本，但最終會在textarea文本下方出現小小的滾動條和一大堆額外的白色區域。我只是不知道該如何擴展textarea。我無法使用固定的高度，因爲textarea的內容是動態的。 – Halcyon

其他網站如Facebook也必須處理這個問題，我相信唯一的解決方案是使用JavaScript，如果您希望在增加textarea上的內容時擴展它。有很多代碼示例，比如Valoric提到的jQuery插件 – Karl

取而代之，您可以使用JavaScript來解決此問題。

這是James Padolsey的jQuery plugin。它看起來像它會做你想要的。

編輯：我以爲OP不想要一個滾動條，因爲他的溢出...... NVM然後

來源

2011-10-24 22:17:40 Valoric

@GrigoryKalabin現在也破了 – Ascherer

如何將Textarea擴展爲僅使用CSS的100％

回答

相關問題