如何使文本框缩放以填满整个屏幕

Question

我正在制作一个可以制作书籍的小网站，但我在制作文本框时遇到了问题。 问题是当你用一些设置来制作文本框时......

 #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>

请注意我是如何向其中添加一些预设行和列的。 我希望它垂直填满整个屏幕，但如果我将宽度设置为某个值，我的预设行和列就会消失。 我的期望是我不会松开我的行和列，而是填满整个屏幕。 当你使用一个小屏幕时它工作得很好（你可以在这里看到它的照片）但是当我使用一个更大的屏幕时它要么显示小或者填充行和列消失（你可以在这里看到。）我'我已经尝试了所有方法，从更改显示到块到更改字体大小再到在角落里哭泣，但似乎没有任何效果。 请帮忙！

更新我放弃了这个项目，因为我找不到解决这个问题的方法。 感谢您的尝试。

Answer 1

您是否尝试过调整属性文本区域的大小？ 我希望我明白你想要什么，这是我的解决方案。 希望这可以帮助！

 #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>

Answer 2

您可以将width和height添加到 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>

Answer 3

带height: 100vh; 你可以做到这一点。

 * { 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>