Question

我想在没有附加CSS文件且不删除文本的情况下使TextArea全屏显示吗？

<html>
<title>TextArea</title>
<body>
<textarea spellcheck="true"></textarea>
<p>TextArea</p>
</body>
</html>

Answer 1

<html>
   <title>TextArea</title>
   <body>
      <textarea spellcheck="true" style="width: 100%;
         height: 100vh;"></textarea>
      <p>TextArea</p>
   </body>
</html>

如果不想创建单独的CSS样式表，则可以添加内联样式。

Answer 2

使用内联样式：

<html>

<head>
  <title>Fullscreen Textarea</title>

  <body style="width:100px; height:100px;">
    <textarea style="width: 100%; height:100%;"></textarea>
  </body>

</html>

或者，使用<style>标签：

<html>

<head>
  <title>Fullscreen textarea</title>
</head>

<body>
  <textarea id="textarea"></textarea>
</body>
<style>
  body {
    width: 100px;
    height: 100px;
  }
  
  #textarea {
    width: 100%;
    height: 100%;
  }
</style>

</html>

两者具有相同的效果，但是最佳实践是尽可能不要使用内联样式。

有没有一种方法可以使全屏Textarea无需额外的CSS文件？

2 个答案: