title: How do I make a textarea resize properly when I resize browser window?
body: <p>I want 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:</p>
  <pre><code>html, body {
    height: 95%;
    width: 98%;
    margin: 10px;
  }
  
  textarea {
    width: 95%;
    height: 95%;
    margin: auto;
    resize: none;
  }
  </code></pre>
  <p>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.</p>
  <p>Researching I came up with another solution:</p>
  <pre><code>textarea {
      position: fixed;
      top: 10px;
      bottom: 10px;
      left: 10px;
      right: 10px;
      width: 95%;
      resize: none;
  } 
  </code></pre>
  <p>Now the bottom behaves okay but the right size has the same problem as bottom had in the previous solution.</p>
  <p>How can I make the textbox resize properly on browser window resize ?</p>
  <p>Please note that I'm not interested in manually resizing textarea element (note the <code>resize: none</code> 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.</p>
  <p>I've created an example in this jsfiddle:</p>
  <p><a href="https://jsfiddle.net/1akykrg2/13/" rel="nofollow noreferrer">https://jsfiddle.net/1akykrg2/13/</a></p>