本文和大安点讨Z下DIV高度自适应及注意问题，主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两U情c?/p>
DIV高度自适应及注意问?/strong>
U篏了一些经验，ȝZ些关于div高度自适应的技巧，希望有助于大Ӟ转蝲h明出处，谢谢?/p>
一、DIV高度自适应Q父div高度随子div的高度改变而改变）
1、如果父div不定义height、子div均ؓ标准的时候，父div的height随内容的变化而变?实现父div高度随子div的高度改变而改变?/p>
代码Q?nbsp;
- <styletypestyletype="text/css">
- #aa{border:#000000solid5px}
- #bb{border:#00ffffsolid5px;}
- #cc{border:#0033CCsolid5px}
- style>
- <dividdivid="aa">父div
- <dividdivid="bb">子divdiv>
- <dividdivid="cc">子divdiv>
- div>
效果QIE、FF下一?/p>
2、如果父div定义height,子div均ؓ标准的时候，在IE下父div的height随内容变化而变化，ff中则固定大小Q如父div讄height:50px
代码Q?nbsp;
- <styletypestyletype="text/css">
- #aa{border:#000000solid5px;height:50px}
- #bb{border:#00ffffsolid5px;}
- #cc{border:#0033CCsolid5px}
- style>
- <dividdivid="aa">父div
- <dividdivid="bb">子divdiv>
- <dividdivid="cc">子divdiv>
- div>
IE效果
FF下效?/p>
3、如果子div使用了float属性，此时已经q标准，父div不会随内容的高度变化而变化，解决的办法是在Q动的div下面Q加一个空divQ设|clear属性both
未加Idiv代码Q?nbsp;
- <styletypestyletype="text/css">
- #aa{border:#000000solid5px;}
- #bb{border:#00ffffsolid5px;float:left}
- #cc{border:#0033CCsolid5px;float:left}
- style>
- <dividdivid="aa">父div
- <dividdivid="bb">子divdiv>
- <dividdivid="cc">子divdiv>
- div>
IE效果Q?/p>
FF效果Q?/p>
修改后代码：
- <styletypestyletype="text/css">
- #aa{border:#000000solid5px;}
- #bb{border:#00ffffsolid5px;float:left}
- #cc{border:#0033CCsolid5px;float:left}
- style>
- <dividdivid="aa">父div
- <dividdivid="bb">子divdiv>
- <dividdivid="cc">子divdiv>
- <divstyledivstyle="clear:both">div>
- div>
修改后效果：IEFF一?/p>
4.另类的DIV高度自适应
原理:
padding-bottom列拉长变的一样高Q而负的margin-bottom又其回到底部开始的位置Q同Ӟ溢出部分隐藏掉了。此Ҏ必须加文信息才能正常显C?br /> 代码Q?nbsp;
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <styletypestyletype="text/css">
- #aa{border:#000000solid5px;overflow:hidden;}
- #bb{border:#00ffffsolid5px;float:left;
- padding-bottom:100000px;margin-bottom:-100000px;}
- #cc{border:#0033CCsolid5px;float:left;
- padding-bottom:100000px;margin-bottom:-100000px;}
- #dd{float:left}
- style>
- <dividdivid="aa">
- <dividdivid="bb">子divdiv>
- <dividdivid="cc">子divdiv>
- <dividdivid="dd">子div<br/><br/><br/><br/><br/>div>
- div>
效果Q?/p>
二、DIV高度自适应Q子div高度随父亲div高度改变而改变）
在有Ҏ的情况下Q你会发现同一个div,在IE下的高度和在FF下的高度是不一LQ比如你讄了高度ؓ100px的divQ边框是 border:5px;IE的高度是5+5+I白区域=100pxQ而FF下高度是100px的div是不包括高度的，只是I白区域的高度，如下N框的 部分:
黑框的上Ҏ寚w的，但是讄了同L高度Q效果却不一P代码如下Q?/p>
- <styletypestyletype="text/css">
- #aa{border:#000000solid5px;height:100px;}
- #bb{border:#00ffffsolid5px;float:left;height:100%}
- #cc{border:#0033CCsolid5px;float:left}
- style>
- <dividdivid="aa">
- <dividdivid="bb">子divdiv>
- <dividdivid="cc">子divdiv>
- div>
如果没有讄ҎQ完全没有高度不一致的情况Q子div适应父div很简单，如上面代码，只是在子div加了height:100%属性即可。如?讄了边框，可以把子div的高度设|ؓ比父div上下边框高度的|比如在此例中Q可?bb中height改ؓ100-5-5Q?0pxQ结果在 IE和Mozilla中显CZ致?/p>
有一点要注意Q如果父div是body的话Q也是说一个body套了一个divQ让div适合body的大的Q必设|body的高度才能实现子div随body改变而改变，body{height:100%}
]]>
原因Q?br />一般是加蝲CSS文g的\径在页后处于错误的位置Q这时可以用FireFox打开|页Q查看网|码，再点击CSS下方的链接，看是否能链接到CSS文gQ链接不到是报错的?br />
处置Q?br />在html开始前加上如下代码Q?br />
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>XXX</title>
</head>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>XXX</title>
</head>
接下来其它的CSSQJSQIMG写好相对地址好了?img src ="http://www.tkk7.com/heyang/aggbug/375344.html" width = "1" height = "1" />
]]>
#contentContainer{
margin-top:10px;
padding:0px;
border:0px solid #336699;
width:100%;
overflow-x:hidden;
}
margin-top:10px;
padding:0px;
border:0px solid #336699;
width:100%;
overflow-x:hidden;
}
当div的宽度基本和览器可控宽度一致时Q滚动条׃出现Q最ȝ的是会出C个，一个div的，一个浏览器的?br />
q时Q可以如上所C，超出部分隐藏，q样滚动条就不会出现了?br />
IE上效果是滚动条彻底没有，但是FF只是把滚动条|灰Q两者还是有区别的?img src ="http://www.tkk7.com/heyang/aggbug/369943.html" width = "1" height = "1" />
]]>
margin:0px;
padding-top:10px;
padding-left:22px;
border:0px solid #336699;
width:150px;
height:230px;
text-align: left;
font-family:"宋体","Tahoma";
font-size: 12px;
font-weight:normal;
color:#333333;
white-space:normal;
}
见以上粗体部分，比wordbreak之类的好用得多?br />
]]>