Geek Answers Handbook

Setting textarea to use all available space in a div (minus N pixels at the top)

I am trying to customize a custom toolbar for a text box, I have the following

HTML

<div id="main"> <div id="toolbar"></div> <textarea></textarea> </div>

CSS

 #main { background-color: #ddd; height: 400px; width: 400px; position: relative; } #toolbar { background-color: #444; height: 40px; color: white; } textarea { outline: none; border: none; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; position: absolute; top: 40px; bottom: 0; left: 0; right: 0; }

It works exactly the same as I expected in Chrome, but in firefox / i.e.. the text area does not consume all the available space in the div.

How to configure it so that the toolbar occupies 40 pixels at the top of the div, and the text area consumes the rest of the height.

I am dynamically changing this material, so I cannot use the height or width of the "px" for the text field .

Codepen is here: http://codepen.io/anon/pen/pDgvq

+4
source share
5 answers

Best deal

Set the width and height of the textarea to 100%. Then give it a transparent top border of 40px (actually the color really doesn't matter). Be sure to set the window size to the frame. Now position the appropriate toolbar on the higher z-index-voila.

Pen: http://codepen.io/anon/pen/nFfam

Oldie

Instead of moving the text box down, move the toolbar up:

 #main { background-color: #ddd; height: 200px; width: 400px; position: relative; top: 40px; } #toolbar { background-color: #444; height: 40px; width: 100%; position: absolute; top: -40px; } textarea { width: 100%; height: 100%; box-sizing: border-box; }

Pen: http://codepen.io/anon/pen/mEGyp

+5
source

Both Firefox and IE9 + support calc() CSS function (you are out of luck with IE8, but not sure what you support).

I added these lines to CSS textarea in your pen ( updated version ):

 width: calc(100% - 2px); height: calc(100% - 41px); padding: 0;

Indentation is only for normalization; you can select whatever suits you, but remember to adjust the pixel values ​​in calc() accordingly. 2px for width - to compensate for the left and right borders; 41px for height - 40 for the toolbar and 1 for the bottom border.

+3
source

Add width:-moz-available; height:100%;resize: none; width:-moz-available; height:100%;resize: none; in textarea

  textarea { outline: none; border: none; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; position: absolute; top: 40px; bottom: 0; left: 0; right: 0; width:-moz-available; height:100%; resize: none; }

UPDATED DEMO

Another method

You can add div around textarea and specify position: absolute value of div

HTML

 <div id="main"> <div id="toolbar"></div> <div id="container"> <textarea></textarea> </div> </div>

CSS

 #container{ position:absolute; bottom:0px; top:40px; width:100% } textarea { outline: none; border: none; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; resize: none; height:100%; width:99.5% }

Demo 2

+1
source

You can use the height and width for textarea in%, also apply the top to the div toolbar in% for example. If the top is 10%, you get 90% of the height for the text box.

0
source

Hope this is your desired result: Demo

 #main { background-color: #ddd; width: 400px; height: 200px; padding: 0; } div #toolbar { background: #444; width: 100%; height: 40px; } textarea { margin: 0; width: 100%; height: 100%; }
0
source

More articles:


All Articles