在父级元素中填充背景图片来完美解决DIV高度自适应的问题

网络整理 - 07-27

关于DIV高度的自适应，一直是个让人头疼的问题，之前总结过一篇文章在前面：DIV高度自适应解决方法汇总，但只是匆匆看了一下，前面的两种方法都试用过，还行吧，但有时也会出意外的情况，归根结底是基础掌握的不好，第三种方法一下没用过，今天又碰到了这个问题，于是好好地研究了一下，终于明白了这第三种方法的好外，就是在父级元素中填充背景，下面是代码，希望对你的学习也有所帮助。

HTML代码：

    <div id="container">
        <div id="leftSide">这边的高度自适应右侧的高度</div>
        <div id="rightSide">
                <script type="text/javascript">
                    for(i=0;i<10;i++){
                    document.write(i+'<br>');
                    }
                </script>
        </div>
    </div>

CSS代码：

    #container{font-size:14px;width:300px;overflow:hidden;border:3px solid gray;margin:10px auto 0;color:#fff;background:url() repeat-y;}
    #leftSide{width:100px;float:left;}
    #rightSide{width:190px;float:right;text-align:center;background:purple;}