13

我想说文本区域的高度等于视口高度的 50%。我怎样才能做到这一点？一个简单height: 50%的不做的伎俩。

4

8 回答 8

42

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

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

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

<!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% 之类的东西，或
  • 在 textarea 上将填充和边框设置为 0/none，或者
  • 使用“box-sizing:border-box;” 改变“高度”的含义。这是 CSS 未来的一项功能，它需要许多额外的特定于浏览器的重述（例如“-moz-box-sizing”）。
于 2009-03-11T03:12:17.190 回答
10

这是一个小例子，它使用 CSS3视口单元textarea恰好占据视口高度的 50%，它是vh

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

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

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

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

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

It's pretty good supported by the different browsers, except for Opera mini and partial support in IE.

于 2015-03-24T21:46:56.610 回答
2

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

于 2009-03-11T01:33:56.007 回答
1

如果你设置显示：块，你可以做到这一点。但是在 html 4.01 strict 你必须定义 cols 和 rows，但我认为你可以用 css 覆盖它们。

于 2009-03-11T01:35:17.110 回答
1

HTML 和 CSS 不太擅长用高度来做这种事情。它们肯定更多是关于垂直滚动自由流动的页面。正如 FryGuy 所说，我认为 JavaScript 可能是您最完整的解决方案。

于 2009-03-11T01:38:00.757 回答
0

虽然我没有在所有浏览器中对此进行测试，但似乎大多数人都接受简单地指定高度就可以了。

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

只需使用以下代码：

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

您遇到问题的浏览器是什么？

于 2009-03-11T01:37:39.337 回答
0

当这个问题被问到时，这可能不在，但 CSS Values and Units Module Level 3 包括viewport-percentage lengths。不过，除了 iOS 之外的移动浏览器似乎不支持它。

于 2013-03-18T23:04:32.020 回答
-2

尝试删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2013-04-01T20:17:36.867 回答