How do I make a textarea resize properly when I resize browser window?

Question

I what to have a textarea that fills the most part of my screen. And I want it to resize properly when the browser window resizes. So I made the following css:

html, body {
  height: 95%;
  width: 98%;
  margin: 10px;
}

textarea {
  width: 95%;
  height: 95%;
  margin: auto;
  resize: none;
}

but when I resize the browser window the right size works ok, but bottom part of the textarea will not obey my 95% rule. It shrinks until the bottom passes window bottom.

Researching I came up with another solution:

textarea {
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: 95%;
    resize: none;
}

now the bottom behaves ok, but the right size has the same problem as bottom had in the previous solution.

How can I make the textbox resize properly on browser window resize ?

Please notice that I'm not interested in manually resizing textarea element (note the resize: none rule). I want it to resize when browser window resizes. Another thing is that I don't care about the size of the text inside textarea. I should resize independently from the text.

I've created an example in this jsfiddle:

https://jsfiddle.net/1akykrg2/13/

Any help appreciated. Thanks

I'm using bootstrap... but didn't setup the layout thing... will give it a try — Nelson Teixeira

Roko C. Buljan Roko C. Buljan · Accepted Answer · 2016-04-08T04:00:32

Updated jsFiddle

*{
  box-sizing:border-box;           /* easier box-model calculations */
  -webkit-box-sizing: border-box;
}
html, body {
  height: 100%;
  margin:0;
}

textarea {
  position: fixed;
  left:10px; top:10px;
  width:  calc(100vw - 20px);      /* calc and viewport to the rescue */
  height: calc(100vh - 20px);
  resize: none;
}

<textarea></textarea>

How do I make a textarea resize properly when I resize browser window?

1 Answers