使用百分比来获取高度，必须要求定义了父容器高度

最新推荐文章于 2019-10-16 14:31:00 发布

最新推荐文章于 2019-10-16 14:31:00 发布 · 260 阅读

文章标签：

#IE #CSS #HTML #XHTML

本文介绍了如何使用CSS百分比设置元素的高度，强调了父容器高度定义的重要性，并提供了跨浏览器一致表现的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用百分比来获取高度，必须要求定义了父容器高度
如果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 ">

</style>
</head>

<body>
<div class= "col1 "> 这是第一列20%宽,100%高,左浮动
</div>
<div class= "col2 "> 这是第二列20%宽,100%高,左浮动
</div>

</body>
</html>