如何讓textarea佔用div中的剩餘高度？

我有一組代碼，如下所示。重點是有一組圖像在div中，並且div的其餘部分用textarea填充。如果我將height設置爲100％，它將使其高度相同，而不是（div.height - images.height），並使textarea變長。如何讓textarea佔用div中的剩餘高度？

它在w3c上表示inherit目前不能正常工作，auto只會創建一個默認textarea，並且硬編碼它將無法完成它，因爲div可能更大或更小。

你們都做了什麼來完成這件事？

<div id = "parent"> 
    <div id = "images" style="background-color:#99ccff;"> 
    <img style = "padding:0px; border:0px;" src = "..." /> 
    <img style = "padding:0px; border:0px;" src = "..." /> 
    <img style = "padding:0px; border:0px;" src = "..." /> 
    <img style = "padding:0px; border:0px;" src = "..." /> 
    <img style = "padding:0px; border:0px;" src = "..." /> 
    <img style = "padding:0px; border:0px;" src = "..." /> 
    <img style = "padding:0px; border:0px;" src = "..." /> 
    </div> 
    <textarea style="width:100%; height:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" > 
    </textarea> 
</div>

來源

2012-06-12 Fallenreaper

如何定義'＃parent'的高度？你可以做一個http://jsfiddle.net/演示顯示問題？（您可以使用http://dummyimage.com/作爲圖像） – thirtydot

http：// jsfiddle。net/atTK7/ – Fallenreaper

似乎無法使此行爲在Chrome瀏覽器中運行。

我試過將圖片和textarea分成兩個CSS表格行，給#images一個高度，以便#textarea-container自動調整它的高度。下一步是給textarea 100％的高度和100％的寬度。

絕對定位在相對定位表格單元的元件是不支持：
CSS Positioning inside of an HTML Table

所以textarea { position: absolute; left:0;right:0;bottom:0;top:0 }在相對定位表單元將不工作。

HTML

<div id ="parent"> 
    <div id="images"> 
     <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" /> 
     <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" /> 
     <img src="http://www.dummyimage.com/20x20/cc5acc/fff.png" /> 
     <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" /> 
     <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" /> 
     <img src="http://www.dummyimage.com/120x20/cc5acc/fff.png" /> 
     <img src="http://www.dummyimage.com/50x20/cc5acc/fff.png" /> 
    </div> 

    <div id="textarea-container"> 
     <textarea></textarea>  
    </div>  
</div>

CSS

* { margin:0; padding: 0 } 

#parent{ 
    width: 400px; 
    height: 300px; 
    display: table; 
    background: blue; 
} 
#images { 
    display: table-row; 
    height: 0; 
} 

#textarea-container { 
    display: table-row; 
} 

textarea { 
    height: 100%; 
    width: 100%; 
}

！此解決方案取決於display: table,display: table-row和Google Chrome。

現場演示（僅適用於谷歌瀏覽器）：http://jsfiddle.net/atTK7/4/
顯示錶支持：http://www.quirksmode.org/css/display.html

一個JavaScript解決方法的瀏覽器，除了鉻，值得推薦。

來源

2012-06-12 18:31:26

-1

即使我不清楚你想做什麼都知道，你可以使用jQuery來幫助你得到實際元素的大小，並迫使你的textarea的擴大或縮小。這應該可以幫到你：

<script type="text/javascript"> 
var max_div_height = 1000; //The max height of your div in pixels 
var total_div_height = 0 // The total height of your divs combined 
jQuery(".container").each(function(){ 
    var context = $(this); 
    var height = context.height(); 
    total_div_height+=height; //If it's width, set height otherwise 
}); 
var textarea_size = max_div_height - total_div_height; 
jQuery("#myTextarea").css("height", textarea_size+"px") // Give an ID to your textarea 
</script>

來源

2012-06-12 16:04:45

OP沒有用jQuery或JavaScript標記問題。 – j08691

我不想爲此使用JS。我希望這只是完全用CSS做的事情......就像某種填充命令......用textarea填充容器的剩餘高度。 – Fallenreaper

也許這是你的瀏覽器有問題。我只是試過你的代碼，似乎做你想做的事：http://jsfiddle.net/Rorok_89/DMdyY/1/

來源

2012-06-12 16:08:40

我相信OP希望與圖像在同一行上的textarea。 – j08691

不在同一行上。我希望它填充剩餘的內容....所以像所有的圖像將包裹並佔用一些總高度，然後正如我上面的評論：我會有某種填充命令，將採取剩餘的高度，並將其應用於textarea – Fallenreaper

我不是很擅長使用它，但你不妨嘗試顯示：盒;。我有一個example here，它可以做你想做的（我認爲），但是主要的錯誤是你不能再調整textarea的大小（但如果這不是問題，你可以改變resize：none;）。

來源

2012-06-12 18:19:23 Fewfre

此外，更多關於[Flex-Boxes]（https://developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes） – Fewfre

如何讓textarea佔用div中的剩餘高度？

回答

相關問題