经典论坛's Archiver

feayi 发表于 2008-1-4 15:22

IE7下百分比高度无效？

前几天一直研究使用"position:absolute;”布局B/S软件的页面。
遇到这个问题：Body和父层DIV都定义height:100%; 但是内层middleDiv的高度定义height:100%后在IE7下显示，还是不显示，在IE6是正常，请教各位解决的办法：

[html]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试页面</title>
<style type="text/css">
<!--
*{
  margin:0px;
  padding:0px;
}
html,body{
  height:100%;
  overflow:hidden;
}
html>body{   /*-- for !IE6.0 --*/
  width:auto;
  height:auto;
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
}
body{
  background-color:#fff;
}
#mainDiv{
  width:100%;
  height:100%;
  _padding:100px 0px 30px;
}
#middleDiv{
  width:100%;
  height:100%;
  background-color:#FF0000;
  border:1px solid black;
}
#mainDiv>#middleDiv{
  width:auto;
  height:auto;
  position:absolute;
  top:101px;
  left:0px;
}
#topDiv{
   width:100%;
   height:100px;
   border:1px solid blue;
   background-color:#00FF00;
   position:absolute;
   top:0px;
   left:0px;
}
#footerDiv{
   width:100%;
   height:30px;
   background-color:#0000FF;
   border:1px solid white;
   position:absolute;
   bottom:0px;
   bottom:-1px;
}
-->
</style>
</head>

<body>
<div id="mainDiv">
  <div id="topDiv">top</div>
  <div id="middleDiv">middle</div>
  <div id="footerDiv">foot</div>
</div>
</body>
</html>
[/html]

wiseinfo 发表于 2008-1-4 16:09

#mainDiv>#middleDiv{
  width:auto;
  height:auto;
  position:absolute;
  top:101px;
  left:0px;
}

因为你把上边这段代码理解错了！你没能理解标准盒模型中当position属性值为absolute且width属性值为auto时，盒模型的真实宽度应为其left属性值到right属性值之间的宽度。
高度亦然，当position属性值为absolute且height属性值为auto时，盒模型的真实高度应为其top属性值到bottom属性值之间的高度。


这个地方你不应该把width属性值设为auto，因为这个时候width的属性值就应该是100%。因为其左右不需要为别人留出空白。
而当你的height属性值设为auto时，你应该同时设置top和bottom这两个属性来使盒模型有一个高度。这时top属性值应为101px为topDiv让出空白，bottom属性值应为31px为footerDiv让出空白。
这时middleDiv的真实高度值和使用高度百分比的真实高度值有些类似都不决定于自己而是其父Div。middleDiv的真实高度值 = 父Div高度 - top属性值 - bottom属性值 。

feayi 发表于 2008-1-4 16:40

多谢楼上的兄弟，非常详细~又多学了一招

feayi 发表于 2008-1-4 17:52

2楼的兄弟，还要麻烦你帮忙解答下下面的问题，我在中间层加入3个层，最左边为目录树，中间的BarDiv为“展开/隐藏”按钮，右边层为内容显示层，在左边树收回去后，右边层是自动改变大小的。现在还是3个层的高度不能适用，还是在IE7下的问题，谢谢！

[html]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试页面</title>
<style type="text/css">
<!--
*{
  margin:0px;
  padding:0px;
}
html,body{
  height:100%;
  overflow:hidden;
}
html>body{   /*-- for !IE6.0 --*/
  width:auto;
  height:auto;
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
}
body{
  background-color:#fff;
}
#mainDiv{
  width:100%;
  height:100%;
  _padding:100px 0px 30px;
}
#middleDiv{
  width:100%;
  height:100%;
  background-color:#FF0000;
  border:1px solid black;
  padding:6px 0px;
}
#mainDiv>#middleDiv{
  width:100%;
  height:auto;
  position:absolute;
  top:101px;
  bottom:30px;
}
#topDiv{
   width:100%;
   height:100px;
   border:1px solid blue;
   background-color:#00FF00;
   position:absolute;
   top:0px;
   left:0px;
}
#footerDiv{
   width:100%;
   height:30px;
   background-color:#;
   border:1px solid white;
   position:absolute;
   bottom:0px;
   bottom:-1px;
}
#tree{
   width:187px;
   height:100%;
   border:1px solid #FFFFFF;
   float:left;
}
#BarDiv{
   width:7px;
   height:100%;
   margin-left:0px;
   float:left;
   background-color: #006699;
}
#contentDiv{
   width:auto;
   height:100%;
   border:1px solid #fff;
   margin-left:3px;
}
-->
</style>
</head>

<body>
<div id="mainDiv">
  <div id="topDiv">top</div>
  <div id="middleDiv">
   <div id="tree">功能树</div>
   <div id="BarDiv"><</div>
   <div id="contentDiv">内容层</div>
  </div>
  <div id="footerDiv">foot</div>
</div>
</body>
</html>
[/html]

[[i] 本帖最后由 feayi 于 2008-1-4 17:54 编辑 [/i]]

wiseinfo 发表于 2008-1-4 18:53

看看 [url]http://bbs.blueidea.com/thread-2821456-1-2.html[/url] 这个贴！下边我给出的代码和你要的布局是一样的！自己研究一下学到的会更多。

feayi 发表于 2008-1-5 15:06

wiseinfo
你的帖子我看过了，帮助非常大，也非常感谢。
我另外有个问题，就是如果我想实现左边功能树那个层leftDiv可以"收缩/展开"的JS效果，同时右边的rightDiv也可以跟着"收缩/展开"（此效果在B/S软件里面也是非常常见的效果），使用absolute绝对定位可以实现嘛？像上面我#4的例子，中间的模块考虑收缩展开效果，所以没有用到absolute定位而使用的float来布局，也导致出现height:100%无效的问题出现，一改成absolute就解决了height不能100%的问题了。但是leftDiv和rightDiv的位置都被固定了，即是通过JS是左边层leftDiv隐藏，右边的rightDiv也还是没有全屏的布局（没有变宽），还是定位在了之前的位置上，请问你有什么好的解决办法嘛？

j88s 发表于 2008-1-5 15:37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

把这一行去掉就OK了！

wiseinfo 发表于 2008-1-5 15:42

[quote]原帖由 [i]feayi[/i] 于 2008-1-5 15:06 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=3788521&ptid=2821726][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
wiseinfo
你的帖子我看过了，帮助非常大，也非常感谢。
我另外有个问题，就是如果我想实现左边功能树那个层leftDiv可以"收缩/展开"的JS效果，同时右边的rightDiv也可以跟着"收缩/展开"（此效果在B/S软件里面 ... [/quote]


[url]http://bbs.blueidea.com/thread-2818595-2-2.html[/url]

这里边有已经实现你效果的了。


[quote]原帖由 [i]j88s[/i] 于 2008-1-5 15:37 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=3788553&ptid=2821726][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]

把这一行去掉就OK了！ [/quote]

别误人子弟行吗？

页: [1]



Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.