CSS：文本区域的高度占视口高度的百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/632983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Height of textarea as a percentage of the viewport height
提问by avernet
I'd like to say that the height of a text area is equal to, say, 50% of the height of the viewport. How can I do that? A simple height: 50%doesn't do the trick.
我想说文本区域的高度等于视口高度的 50%。我怎样才能做到这一点？简单的height: 50%行不通。
回答by bobince
A simple height: 50% doesn't do the trick.
一个简单的高度：50% 不起作用。
No, because its parent doesn't have an explicit height. So 50% of what? Parent says ‘auto', which means base it on the height of the child content. Which depends on the height on the parent. Argh! etc.
不，因为它的父级没有明确的高度。那么 50% 是什么？父级说“自动”，这意味着它基于子内容的高度。这取决于父母的身高。啊！等等。
So you have to give its parent a percentage height. And the parent's parent, all the way up to the root. Example 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>
The other possibility if you don't want to have to set height on everything is to use absolute positioning. This changes the element that dimensions are based on from the direct parent to the nearest ancestor with a ‘position' setting other than default ‘static'. If there are no ancestor elements with positioning, then dimensions are based on the “Initial Containing Block”, which is the same size as the viewport.
如果您不想在所有东西上设置高度，另一种可能性是使用绝对定位。这会将维度所基于的元素从直接父元素更改为最近的具有“位置”设置而不是默认“静态”设置的元素。如果没有定位的祖先元素，则尺寸基于“初始包含块”，其大小与视口相同。
Finally, there's the trivial problem of ‘100%' being slightly too big because of the additional padding and border applied to textareas. You can work around this by:
最后，由于应用于 textarea 的额外填充和边框，因此存在“100%”稍微太大的小问题。您可以通过以下方式解决此问题：
- compromising on something like 95%, or
- setting padding and border to 0/none on the textarea, or
- using “box-sizing: border-box;” to change what ‘height' means. This is a CSS future soup feature which requires many additional browser-specific restatements (such as ‘-moz-box-sizing').
- 妥协于 95% 之类的东西，或者
- 在 textarea 上将 padding 和 border 设置为 0/none，或者
- 使用“box-sizing: border-box;” 改变“高度”的含义。这是一个 CSS 未来汤功能，它需要许多额外的特定于浏览器的重述（例如“-moz-box-sizing”）。
回答by Balthazar
Here is a little example of a textareawhich takes exactly 50% of the viewport height using the CSS3 vhviewport unitwhich is
这是一个小例子，textarea它使用 CSS3vh视口单元正好占据视口高度的 50%，它是
Equal to 1% of the height of the initial containing block.
等于初始包含块高度的 1%。
So if we set the height of the textareato 50vh, it will get half of the bodyheight:
因此，如果我们将高度设置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 supportedby the different browsers, except for Opera miniand partial support in IE.
除了Opera mini和IE 中的部分支持外，不同浏览器都很好地支持它。
回答by FryGuy
I think you need to use javascript in some way to do this. Handle the resize event, and set the text area to be that many pixels.
我认为你需要以某种方式使用 javascript 来做到这一点。处理 resize 事件，并将文本区域设置为那么多像素。
回答by Vasil
You can do it if you set display:block. But in html 4.01 strict you must define cols and rows, but I think you can override them with css.
如果你设置了 display:block，你就可以做到。但是在 html 4.01 严格中，您必须定义列和行，但我认为您可以用 css 覆盖它们。
回答by Kevin Conner
HTML and CSS aren't so good at doing this kind of thing with heights. They are definitely more about scrolling vertically through a free-flowing page. I think JavaScript is likely to be your most complete solution, as FryGuy says.
HTML 和 CSS 不太擅长用高度来做这种事情。它们绝对更多是关于在自由流动的页面中垂直滚动。正如 FryGuy 所说，我认为 JavaScript 可能是您最完整的解决方案。
回答by legoscia
This was probably not around when this question was asked, but CSS Values and Units Module Level 3 includes viewport-percentage lengths. It seems not to be supported on mobile browsers except iOS, though.
当提出这个问题时，这可能并不存在，但是 CSS Values and Units Module Level 3 包括viewport-percentage lengths。但是，除 iOS 之外的移动浏览器似乎不支持它。
回答by Brian
While I do not have all browsers to test this in, it appears as though most accept simply specifying the height should work.
虽然我没有所有的浏览器来测试这个，但似乎大多数人都接受简单地指定高度应该可以工作。
I tested this in Internet Explorer 7, and Firefox 3.0.
我在 Internet Explorer 7 和 Firefox 3.0 中对此进行了测试。
Simply use the following code:
只需使用以下代码：
<textarea style="height: 50%; width: 80%;">Your text here</textarea>
What browser(s) were you having issues with?
您在使用什么浏览器时遇到问题？
回答by KSA dev
Try remove
尝试删除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
