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


Tags: html,css,resize

Problem :

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



Solution :

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>


    CSS Howto..

    how to call css and js files in webview?

    How to I apply a style to only the first row (matching a class) of a table using pure css?

    How to remove the text from this html

    How to call a CSS file from the right place

    CSS Overflow: overlay. Is it deprecated? How can I replace it?

    How to avoid this hardcoded index.js when use webpack?

    How do I set my ul's margin after setting every padding and margin to zero in CSS? [closed]

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    How to only have margin between child and not with parent in CSS?

    How to keep an unordered list centered within the screen?

    How to add a custom CSS file in ExtJs 5?

    How to get the css with in inline styles using jquery

    How to get access to file css in JSF 2.0

    Change jQuery slideshow script to rotate background image defined in css class

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How to create full height content section with fixed header and footer in CSS with scrollbar hidden if not required [closed]

    How to Edit the CSS File of the Installed Plugin in Wordpress

    How to apply a CSS transition only to the transform property

    How can I fit the iframe height at 100%?

    How can I create the shape of side mirrors of a truck/lorry?

    How to make CSS menu stay on top

    jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

    How can I include an element within a div without using html?

    How to apply a sifr rule to a hyperlink and also its a.active counterpart

    CSS: How to make element appear from left of the screen?

    How to I make the width of my CSS wrapper relative to the size of the monitor?

    How do I do the CSS for this?

    How can I override CSS inherited properties

    How to center multiple line text in html using css, just like
    ?

    How to change css for span in span?