使用百分比来获取高度，必须要求定义了父容器高度
如果div的父容器没有定义高度，那么设置百分比无效。其他具有box模型的标签也是同理
html是所有标签的父容器
默认情况下
在IE下html高度是100% 而FF下面HTML标签并不是100%高度
是body容器 在IE下 body不是100%高度 而FF下body标签是100%高度
所以定义css样式
html,body
{
width:100%;
height:100%;
}
div.col1
{
width:20%;
height:100%;
float:left;
background-color:#cccccc;
}
div.col2
{
width:80%;
height:100%;
float:left;
background-color:#ffffcc;
}
这里是写好的页面测试代码了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> div百分比高度 </title>
<style type= "text/css ">
<!--
* {
margin:0px;
padding:0px;
}
html,body
{
width:100%;
height:100%;
}
div.col1
{
width:20%;
height:100%;
float:left;
background-color:#cccccc;
}
div.col2
{
width:80%;
height:100%;
float:left;
background-color:#ffffcc;
}
-->
</style>
</head>
<body>
<div class= "col1 "> 这是第一列20%宽,100%高,左浮动
</div>
<div class= "col2 "> 这是第二列20%宽,100%高,左浮动
</div>
</body>
</html>