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

Im 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…

Html

<textarea rows="27" cols="50" id="text"></textarea>

CSS


#text {
background-color: white;
border-radius: 10px;
border: 4px #008f7e solid;
height: 60%;
margin: auto;
display: table;
font-size: 45%;
}

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. It works perfectly when your 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.) Ive 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!

CodePudding user response：

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>

CodePudding user response：

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>