网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::
  119 随笔 :: 0 文章 :: 1 评论 :: 13万 阅读
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

在设置网页中元素的比例长度时,需要注意先设置好它的所有父元素的长度。比如下面的代码将无法将一个 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

posted on   zoho  阅读(279)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示