我想说一个文本区域的高度等于视口高度的50％.我怎样才能做到这一点？一个简单的高度：50％没有办法.
解决方法
A simple height: 50% doesn’t do the trick.
不,因为它的父级没有明确的高度.那么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>
另一种可能性,如果你不想设置高度在一切都是使用绝对定位.这会将基于直接父元素的元素更改为最接近的祖先,而’position’设置不是默认’static’.如果没有定位的祖先元素,则尺寸基于与视口大小相同的“初始包含块”.
最后,有一个微不足道的问题是’100％’稍微过大,因为文字区域附加了一些填充和边框.你可以解决这个问题：
>妥协在95％,或>在文本区域设置填充和边框为0 / none,或>使用“Box-sizing：border-Box”来改变“height”的含义.这是一个CSS未来的汤功能,需要许多额外的浏览器特定重述(如“-moz-Box-sizing”).
