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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With