CSS：文本区域的高度占视口高度的百分比

StackOverflow https://stackoverflow.com/questions/632983

  •  08-07-2019
  •  | 
  •  

题

我想说的是，文本区域的高度等于视口高度的 50%。我怎样才能做到这一点？一个简单的 height: 50% 没有成功。

有帮助吗？

解决方案

简单的高度：50% 并不能解决问题。

不，因为它的父级没有明确的高度。那么50%是什么呢？父级说“auto”，这意味着它基于子级内容的高度。这取决于父母的身高。啊！ETC。

所以你必须给它的父级一个百分比高度。还有父母的父母，一直到根。示例文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        html, body, #mything, #mything textarea { height: 100%; }
    </style>
</head><body>
    <div id="mything">
        <textarea rows="10" cols="40">x</textarea>
    </div>
</body></html>

如果您不想在所有内容上设置高度，另一种可能性是使用绝对定位。这会将尺寸所基于的元素从直接父级更改为最近的祖先，其“位置”设置不同于默认的“静态”。如果没有具有定位的祖先元素，则尺寸基于“初始包含块”，其大小与视口相同。

最后，由于文本区域应用了额外的填充和边框，因此存在“100%”稍微太大的小问题。您可以通过以下方式解决此问题：

  • 妥协95%之类的东西，或者
  • 在文本区域上将 padding 和 border 设置为 0/none，或者
  • 使用“盒子大小：边框框；”改变“高度”的含义。这是 CSS 未来的汤功能，需要许多额外的特定于浏览器的重述（例如“-moz-box-sizing”）。

其他提示

以下是 textarea 的一个小例子，它使用CSS3 vh 视口单元

  

等于初始包含块高度的1％。

因此，如果我们将 textarea 的高度设置为 50vh ，它将获得 body height的一半：

html, body, textarea {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

textarea {
  height: 50vh;
}
<textarea></textarea>

不同的浏览器非常好支持， Opera mini 和 IE中的部分支持。

我认为您需要以某种方式使用javascript来执行此操作。处理resize事件，并将文本区域设置为多个像素。

如果设置display：block，则可以执行此操作。但是在html 4.01 strict中你必须定义cols和rows，但我认为你可以用css覆盖它们。

HTML和CSS在高度上做这种事情并不是那么擅长。它们更多的是通过自由流动的页面垂直滚动。我认为JavaScript可能是您最完整的解决方案，正如FryGuy所说。

虽然我没有所有的浏览器来测试这个，但似乎大多数接受只是指定高度应该有效。

我在Internet Explorer 7和Firefox 3.0中进行了测试。

只需使用以下代码：

<textarea style="height: 50%; width: 80%;">Your text here</textarea>

您遇到哪些问题？

当问到这个问题时，这可能不存在，但CSS值和单位模块级别3包括视口百分比长度。但是，似乎除iOS以外的移动浏览器不支持。

尝试删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top