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 can I register a css page from an ascx control?

    how to write a css that only can be visible on desktop in bootstrap

    ASP.NET Gridview - How do I change the color properties vertically?

    How can I create facebook style vertical border line (layout)? :)

    How to prevent a div element to be affected by the box-shadow of another div element?

    How do I split a WordPress theme into 2 columns?

    How to find class =“class1” included class=“class2” in CSS? [closed]

    LESS: How to specify current tag with nesting?

    How to display fieldset text and button inline on small screens?

    How to vertical align text in the middle without changing size of a div

    How to give a div full height in CSS

    How to partly color the border with css [closed]

    How to dynicamlly center the center of a div based on screen size

    How to add space to left-right of the Web-Page using HTML/CSS

    CSS hover - parents are affected, too. How to avoid this?

    How can I hide with CSS only?

    How to prevent the vertical scroll of this div?

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    How does jQuery affect CSS structure

    How to apply :hover on :after to certain div in CSS

    How to enforce image max-width when using bootstrap 3?

    How to get divs and anchors stacked on top of each other with the same width

    How can I make a div 100% of the browser window height, but with a top and bottom margin?

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How to use CSS transition for existing list items to make room for new ones?

    How do you organize your template structure in CodeIgniter?

    How to place text at the bottom when there's predefined height!

    Gradient css borders not showing in internet explorer an firefox

    How is designing shape similar to waves with html and css?

    how to div.width css property using js or jquery?