当前位置: 代码迷 >> HTML/CSS >> 子div高度顺应固定父div
  详细解决方案

子div高度顺应固定父div

热度:626   发布时间:2013-12-28 22:19:34.0
子div高度适应固定父div
本帖最后由 linshigong2013 于 2013-12-25 16:30:31 编辑
aaaa<br/>aaaa<br/> 是动态变化的 div id=aaa 高度宽度是固定的
我想达到 无论 aaaa<br/>aaaa<br/> 多少 div id=bbb 高度宽度自动适应
超出的部分 div id=bbb 的div出现横竖滚动条 
目前我这个 父div出现滚动条 不是我想要的 大侠们帮我调调
<div id="aaa" style="height: 150px;width: 300px;border: 1px solid #b4c9c6;margin: 4px 0 0 3px;background-color: #ffffff;	overflow: auto;">aaaa<br/>aaaa<br/>aaaa<br/>aaaa<br/>
<div id="bbb" style="SCROLLBAR-FACE-COLOR: #D5DEDB; SCROLLBAR-HIGHLIGHT-COLOR: #e9f5f8; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #deeb9f; SCROLLBAR-ARROW-COLOR: #123456; SCROLLBAR-TRACK-COLOR: #fcfdfd; SCROLLBAR-DARKSHADOW-COLOR: #deeb9f;width:100%;height:100%">
<table cellspacing="0" rules="all" border="1" style="border-color:#D8E4F8;width:787px;border-collapse:collapse;">
<tr align="center" style="color:#404040;background-color:#E0E0E0;font-weight:normal;height:28px;">
<th scope="col" style="font-weight:normal;width:180px;"></th><th align="center" scope="col" style="font-weight:normal;"></th><th align="center" scope="col" style="font-weight:normal;width:60px;"><a href="javascript:__doPostBack('dg','Sort$pen03')" style="color:#404040;"></a></th><th align="center" scope="col" style="font-weight:normal;width:140px;"><a href="javascript:__doPostBack('dg','Sort$pen04')" style="color:#404040;"></a></th><th align="center" scope="col" style="font-weight:normal;width:60px;"></th><th align="center" scope="col" style="font-weight:normal;width:140px;"></th>
</tr><tr style="height:24px;">
<td align="left" style="width:180px;">                 </td><td align="left"></td><td align="center" style="width:60px;">&nbsp;</td><td align="center" style="width:140px;">&nbsp;</td><td align="center" style="width:60px;">&nbsp;</td><td align="center" style="width:140px;">&nbsp;</td>
</tr><tr style="height:24px;">
<td align="left" style="width:180px;">                 </td><td align="left"></td><td align="center" style="width:60px;">&nbsp;</td><td align="center" style="width:140px;">&nbsp;</td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td>
</tr><tr style="height:24px;">
<td align="left" style="width:180px;">                  </td><td align="left"></td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td>
</tr><tr style="height:24px;">
<td align="left" style="width:180px;">                 </td><td align="left">              </td><td align="center" style="width:60px;">&nbsp;</td><td align="center" style="width:140px;">&nbsp;</td><td align="center" style="width:60px;">&nbsp;</td><td align="center" style="width:140px;">&nbsp;</td>
</tr><tr style="height:24px;">
<td align="left" style="width:180px;">                 </td><td align="left">                </td><td align="center" style="width:60px;">&nbsp;</td><td align="center" style="width:140px;">&nbsp;</td><td align="center" style="width:60px;">&nbsp;</td><td align="center" style="width:140px;">&nbsp;</td>
</tr></table>
</div>
</div>

------解决方案--------------------
  相关解决方案