文本區域擴展爲垂直填充：適用於Chrome，但不適用於Firefox

Question

我試圖創建textarea，它垂直擴展以填充div中的所有空白空間，除了固定的高度偏移量和上面的固定高度偏移量。以下CSS可以爲Chrome提供技巧，但不支持Firefox。在Firefox中，textarea會獲得看起來像默認高度的東西，並且保持那麼大，從而在下面留下額外的空白空間。有沒有在所有瀏覽器中使用Chrome瀏覽器的建議？

#add-comment-text 
{ 
    position: absolute; 
    left: 5px; 
    top: 50px; 
    bottom: 50px; 
    width: 99%; 
} 

https://jsfiddle.net/2to0upmz/1/

Answer 1

您可以使用css calc function：

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
#add-comment-pane 
 
{ 
 
    height: 100%; 
 
} 
 

 
#add-comment-header 
 
{ 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 

 
#add-comment-text 
 
{ 
 
    position: absolute; 
 
    left: 5px; 
 
    top: 50px; 
 
    bottom: 50px; 
 
    width: 99%; 
 
    height: calc(100% - 100px); <!-- HERE --> 
 
} 
 

 
#add-comment-button 
 
{ 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
}

<div id="add-comment-pane"> 
 
    <div class="unselectable" id="add-comment-header"> 
 
     Comment on: 
 
     <a href="https://daringfireball.net/projects/markdown/syntax" style="text-decoration: none" target="_blank">markdown</a>. 
 
    </div> 
 
    <textarea id="add-comment-text"></textarea> 
 
    <button class="pure-button pure-button-primary" id="add-comment-button">Post Comment</button> 
 
</div>

Answer 2

添加height您textarea：

#add-comment-text { 
    position: absolute; 
    left: 5px; 
    top: 50px; 
    bottom: 50px; 
    width: 99%; 
    height:85%; 
}