垂直方向に塗りつぶすテキスト領域：Firefoxでは動作しませんが、Firefoxでは動作しません。

Question

textareaを作成してdivのすべての空き領域を埋めるようにしようとしています。 。次のCSSはFirefoxではなく、Chromeのトリックです。 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

あなたtextareaにheightを追加します。

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