Question

我想说文本区域的高度等于，例如，视口高度的50％。我怎样才能做到这一点？一个简单的height: 50%不能解决问题。

Answer 1

一个简单的高度：50％不能解决问题。

不，因为它的父级没有明确的高度。那么50％的是什么？家长说'自动'，这意味着它基于子内容的高度。这取决于父母的身高。哎呀！等

所以你必须给它的父母一个百分比高度。和父母的父母一直到根。示例doc：

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

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

最后，由于额外的填充和边框应用于textareas，因此“100％”的微不足道的问题略微过大。您可以通过以下方式解决此问题：

妥协95％或
在textarea上将填充和边框设置为0 / none，或
使用“box-sizing：border-box;”来改变'height'的含义。这是一个CSS未来汤功能，需要许多额外的浏览器特定重述（例如'-moz-box-sizing'）。

Answer 2

以下是textarea的一个小例子，它使用CSS3 vh viewport unit获取视口高度的50％

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

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

＆＃13;

html, body, textarea {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

textarea {
  height: 50vh;
}

＆＃13;

<textarea></textarea>

＆＃13;

不同浏览器的pretty good supported， Opera mini 和 IE 中的部分支持除外。

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

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

只需使用以下代码：

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

您遇到哪些问题？

Answer 7

当提出这个问题时，这可能不存在，但CSS值和单位模块级别3包括viewport-percentage lengths。但似乎not to be supported on mobile browsers except iOS。

Answer 8

尝试删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS：textarea的高度占视口高度的百分比

8 个答案: