'How do I make a textbox scale to fill the whole screen

I'm making a little site where you can make books, and I’m having problems with making a textbox. The problem is when you make the textbox with some settings to it…

#text {
  background-color: white;
  border-radius: 10px;
  border: 4px #008f7e solid;
  height: 60%;
  margin: auto;
  display: table;
  font-size: 45%;
}
<textarea rows="27" cols="50" id="text"></textarea>

Notice how I added some preset rows and columns to this. I want it to fill the whole screen vertically but if I set the width to something my preset rows and columns disappear. My expectation is that I don’t loose my rows and columns but fill the whole screen. It works perfectly when you're using a small screen (you can see a photo of it here) but when I use a bigger screen it either shows up small or fills the rows and columns disappear (you can see right here.) I've tried everything from changing the display to block to changing the size of the font to crying in the corner but nothing seems to work. Please help!

Update I’m giving up on this project because I can’t find a fix for this. Thanks for trying.

htmlcss


Solution 1:[1]

you can add width and height to styles.

body,html{
 height: 100%;
 margin: 0;
}
#text {
  box-sizing: border-box;
  background-color: white;
  border-radius: 10px;
  border: 4px #008f7e solid;
  height: 100%;
  margin: auto;
  display: table;
  font-size: 45%;
  width: 100%;
}
<textarea id="text"></textarea>

Solution 2:[2]

Have you tried to resize attribute textarea? I hope I understand what you want, this is my solution. Hope this helps!

#text {
background-color: white;
border-radius: 10px;
border: 4px #008f7e solid;
min-height: 60%;
margin: auto;
font-size: 45%;
width:100%;
}
<textarea rows="27" cols="50" id="text" value="">Notice how I added some preset rows and columns to this. I want it to fill the whole screen vertically but if i set the width to something my preset rows and columns disappear. My expectation is that I don’t loose my rows and columns but fils the whole screen.</textarea>

Solution 3:[3]

With height: 100vh; you can achieve this.

* {
 padding: 0;
 margin: 0;
}

#text {
  box-sizing: border-box;
  background-color: white;
  border-radius: 10px;
  border: 4px #008f7e solid;
  height: 100vh;
  margin: auto;
  display: table;  
  width: 100%;
  padding:20px;
}
<textarea id="text">some text</textarea>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahmad MRF
Solution 2
Solution 3 Maik Lowrey

Related Questions