当前位置: 代码迷 >> HTML/CSS >> IE6下如何实现height:100%;width:100%;四周空10px,父div的clientheight不变,
  详细解决方案

IE6下如何实现height:100%;width:100%;四周空10px,父div的clientheight不变,

热度:672   发布时间:2012-04-24 14:15:38.0
IE6下怎么实现height:100%;width:100%;四周空10px,父div的clientheight不变,急!!!!
IE6下怎么实现height:100%;width:100%;四周空10px,父div的clientheight不变,急!!!!

<!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>无标题文档</title>

<style>
*{margin:0px;padding:0px}
.div1{width:300px;height:300px;background:#aacc00;}
.div2{background:#aaccff;}

/*---------IE7/IE8其他浏览器-------------*/
/*
.div1{position:relative}
.div2{position:absolute;top:20px;left:20px;right:20px;bottom:20px;}
*/

/*---------IE6-------------*/
.div1{_padding:20px;}
.div2{_height:100%;
</style>
</head>

<body>
<div class="div1">
<div class="div2">dfd</div>
</div>


</body>
</html>

------解决方案--------------------
HTML code

<!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>无标题文档 </title> 

<style> 
*{margin:0px;padding:0px} 
.div1{width:300px;height:300px;background:#aacc00;} 
.div2{background:#aaccff;} 

/*---------IE7/IE8其他浏览器-------------*/ 
.div1{position:relative} 
.div2{position:absolute;top:20px;left:20px;right:20px;bottom:20px;} 
 

/*---------IE6-------------*/ 
.div1{_padding:20px;} 
.div2{_height:expression(div1.clientHeight-40);_width:100%;}
</style> 
</head> 

<body> 
<div class="div1" id="div1">
  <div class="div2">dfd </div> 
</div> 


</body> 
</html>

------解决方案--------------------
楼上很全面
------解决方案--------------------
如果你的div1是可知宽高的,那么你可以这样

.div1 { width:260px; height:260px; padding:20px; background:#aacc00; }
.div2 { height:100%; background:#aaccff; }

如果div2的内容可能会比规定高度高,那么可能还需要配合overflow。

另,当你有
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
的时候,不用单独为ie6写样式
------解决方案--------------------
参照楼上给出的方法
  相关解决方案