Make the remaining fill height <textarea>

Question

I learned from this question how to make an HTML element fill the remaining height of the container. But it does not work with <textarea> . This script compares the effects of display: table-row with a <textarea> and a <div> :

http://jsfiddle.net/b4Tt8/2/

Why is there a difference and how can I get the appropriate effect on the text box?

Answer 1

You can use flexbox to set the height of your text area according to its parent.

HTML

 <div class="container"> <div class="btn-wrapper"> <button>X</button> </div> <textarea></textarea> </div> 

CSS

 .container { height: 220px; width: 220px; background-color: pink; display: flex; flex-direction: column; } .container textarea { box-sizing: border-box; /* fit parent width */ height: 100%; } 

jsFiddle

Answer 2

Why are you using display: table-row; declarations display: table-row; ? That is unnecessary. Remove display: table-row; declarations display: table-row; add the declaration box-sizing: border-box; into your textarea selector, and everything will be installed:

 .container { height: 220px; width: 220px; background-color: pink; } .container > textarea { width: 100%; height: 100%; background-color: cyan; box-sizing: border-box; } .container > div { width: 100%; height: 100%; background-color: cyan; } 

Fiddle

EDIT:

The CSS above makes the text area an overflow of the parent div.

Here is the updated answer:

HTML

 <div class="container"> <div class="button-wrapper"> <button>X</button> </div> <div class="textarea-wrapper"> <textarea></textarea> </div> </div> 

CSS 2

 .container { height: 220px; width: 220px; background-color: pink; position: absolute; } .container textarea { width: 100%; height: 100%; background-color: rgba(255, 255, 0, 0.5); box-sizing: border-box; } .container > div { background-color: cyan; } .container .button-wrapper { background-color: yellow; height: 26px; } .container .textarea-wrapper { background-color: green; position: absolute; top: 26px; width: 100%; bottom: 0; } 

CSS 3 (using calc function)

 .container { height: 220px; width: 220px; background-color: pink; } .container textarea { width: 100%; height: 100%; background-color: rgba(255, 255, 0, 0.5); box-sizing: border-box; } .container > div { background-color: cyan; } .container .button-wrapper { background-color: yellow; height: 26px; } .container .textarea-wrapper { background-color: green; height: calc(100% - 26px); } 

Here are the scripts that show both solutions:

CSS 2

CSS 3

Answer 3

If you set a fixed height to button , you can use positioning and do something like this:

HTML : (remote shortcut br)

 <div class="container"> <button>X</button> <textarea></textarea> </div> <div class="container"> <button>X</button> <div>Text</div> </div> 

CSS

 .container { height: 220px; width: 220px; background-color: pink; display: table; } .container > button { display: table-row; } .container > textarea, .container > div { display: table-row; border: none; /* if you keep border then textarea will go out of the parent element */ height: 200px; /* hardcoded */ padding: 0px; /* removing padding for chrome */ width: 100%; background-color: cyan; } 

Working script