网页元素的比例长度

在设置网页中元素的比例长度时，需要注意先设置好它的所有父元素的长度。比如下面的代码将无法将一个 div 的高度设为100%：

<html>
<head>
  <style type="text/css">
  div {
    height: 100%;
    background: green;
  }
  </style>
</head>
<body>
  <div>Hello This!</div>
</body>
</html>

这是因为，div 的父元素 html 和 body 的高度没有设置。对于没有设置高度的元素，它的默认大小是 auto，即根据它的子元素的大小自动调整。因此我们现在指定 div 的高度为100% 将无法生效。用下面改进的方法才是正确的：

<html>
<head>
  <style type="text/css">
  html, body {
    height: 100%;
  }
  div {
    height: 100%;
    background: green;
  }
  </style>
</head>
<body>
  <div>Hello This!</div>
</body>
</html>

另外，IE6 和 IE8 在以严格模式显示网页中包含的 textarea 元素时（例如对于 HTML5 文档），按照上述方法处理仍然无法正常显示 textarea 的比例高度。这个问题目前没找到解决方法，暂时只能用 CSS hack 来解决。

参考资料：

[1] CSS height 属性
[2] css设置最小高度然后自适应
[3] Textarea 100% height in IE
[4] Percentage Height HTML 5/CSS
[5] Conditional comments

[YAML] Date: 2011-05-15 14:54:09