当前位置：首页 → 问答吧 → 关于height的自适应问题

关于height的自适应问题

时间：2010-11-02

来源：互联网

#A{
width:800px;
height:100%;
overflow:hidden;
}
#B{
width:199px;
height:auto;
float:left;
border-right:#000 solid 1px;
}
#C{
width:600px;
height:auto;
float:left;
}

<div id="A">
<div id="B"></div>
<div id="C"></div>
</div>

请问，C块的高度不是固定的，当C块的高度增加时，B块的右边线没有随之增长，那么如何让这根边线和整体的A块的高度一样高呢？

[ 本帖最后由 gstusr 于 2010-11-2 08:54 编辑 ]

作者: gstusr 发布时间: 2010-11-02

width=100%; >> width:100%;怎么会用＝号呢。。

作者: zhaoyan860222 发布时间: 2010-11-02

手误，已修改。如果不用A的背景图，怎么能让B的border-right与A的整高适应呢？

作者: gstusr 发布时间: 2010-11-02

padding-bottom:9999px;
margin-bottom:-9999px;

作者: zqq1988 发布时间: 2010-11-02

楼上正解。负补丁的方法，还有就是使用js解决。

作者: aleafo 发布时间: 2010-11-02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> auto-height in Internet Explorer </title> <style type="text/css"> #a{background:blue; overflow:hidden;width:800px;border:1px solid red;} #b{ background:#CC9999;} #c{ background:#FFFF00;} #b ,#c{float:left;height:auto;margin-bottom:-999px;padding-bottom:999px;width:400px;} </style> </head> <body> <div id="a"> <div id="b"> 经典论坛 » WEB标准化专栏 » 关于height的自适应问题经典论坛 » WEB标准化专栏 » 关于height的自适应问题经典论坛 » WEB标准化专栏 » 关于height的自适应问题经典论坛 » WEB标准化专栏 » 关于height的自适应问题经典论坛 » WEB标准化专栏 » 关于height的自适应问题 </div> <div id="c"> 请问，C块的高度不是固定的，当C块的高度增加时，B块的右边线没有随之增长，那么如何让这根边线和整体的A块的高度一样高呢？请问，C块的高度不是固定的，当C块的高度增加时，B块的右边线没有随之增长，那么如何让这根边线和整体的A块的高度一样高呢？请问，C块的高度不是固定的，当C块的高度增加时，B块的右边线没有随之增长，那么如何让这根边线和整体的A块的高度一样高呢？请问，C块的高度不是固定的，当C块的高度增加时，B块的右边线没有随之增长，那么如何让这根边线和整体的A块的高度一样高呢？请问，C块的高度不是固定的，当C块的高度增加时，B块的右边线没有随之增长，那么如何让这根边线和整体的A块的高度一样高呢？ </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: jackie198512 发布时间: 2010-11-02

在需要自适应的div样式里加padding-bottom:9999px; margin-bottom:-9999px;

作者: zhchgg1234 发布时间: 2010-11-02

谢谢诸位！圆满解决