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

用”百分比”设置页面的高度

CSS属性中Display与Visibility的区别

16 Apr.2011

作者: 我就是个世界分类：技术&学习 » DIV+CSS 出处：本站原创

大 | 中 | 小

关于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(http://www.husw.net/blog/template/Husw2009/images/panel_bot.gif) repeat-y;}
    #leftSide{width:100px;float:left;}
    #rightSide{width:190px;float:right;text-align:center;background:purple;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> 在父级元素中填充背景图片来完美解决DIV高度自适应的问题 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="husw">
  <meta name="Keywords" content="CSS,DIV,DIV高度自适应">
  <meta name="Description" content="在父级元素中填充背景图片来完美解决DIV高度自适应的问题">
  <style>
    #container{font-size:14px;width:300px;overflow:hidden;border:3px solid gray;margin:10px auto 0;color:#fff;background:url(http://www.husw.net/blog/template/Husw2009/images/panel_bot.gif) repeat-y;}
    #leftSide{width:100px;float:left;}
    #rightSide{width:190px;float:right;text-align:center;background:purple;}
  </style>
 </head>

<body>
    <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>
 </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]