子div高度顺应固定父div

子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>

你这 div id=bbb 高度宽度自动适应， 但超出的部分 div id=bbb 的div出现横竖滚动条，这很难实现吧，可以让超过aaa的高度后，aaa出现滚动条
[解决办法]
#bbb{height:100%;width:100%;overflow:scroll;}
[解决办法]

[解决办法]
不好意思，看错你的要求了
按照你的要求的话只能是使用js计算aaaa<br/>aaaa<br/>的高度，然后再算出#bbb需要的高度
[解决办法]
我怎么感觉没有理解到你的意思呢？

你的代码的显示是这样的。


看起来，跟你想要的结果是相同的，没有问题。

同时，我也试了下，你说把div=bbb的高度设置成70px的效果，相同的效果啊，没有什么区别啊。

你不会是想要让滚动条，都显示在页面初始化的时候吧，就算是你把高度设置成70px,在增加你的aaaa<br/>之后，多加几个，bbb还是会跑到下面去了，既然要自适应，那现在的效果有什么问题。

或者是，我没有能理解你想要达到一个怎么样的效果。
[解决办法]

引用:

楼上俩位大哥  你们运行html代码了吗  没效果啊

<table style="width:200px;height:200px;border:1px solid #84C1FF;margin:50px auto;overflow: hidden">
    <tr>
        <td>
            <div style="float: left">
                asdfasfsadfa<br/>
                asdfasfsadfa<br/>
                asdfasfsadfa<br/>
                asdfasfsadfa<br/>
                asdfasfsadfa<br/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="height: 100%;width: 200px;overflow: auto">
                <table>
                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>
                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>
                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>
                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>
                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>
                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>
                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>
                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>
                </table>
            </div>
        </td>
    </tr>
</table>

[解决办法]
chrome好的
[解决办法]
你截得图，是设置成70px的样子吧，我自己试过

你要的这个效果，在父元素高度一定的情况下，是不可能实现的

你再添加几个aaaa<br />试试。就算是70px，也不会显示横向的滚动条了。

如果你非要这样的效果，那就去用DIV的固定定位，去模拟吧，然后勇JS控制模拟出来的滚动条。

不过复杂度就会很高了。