Question

我已经看过这个问题一百次了，我已经尝试了所有给出的解决方案，但我还是没有设法让它发挥作用。

问题：我有一个父DIV有四个孩子DIV，两个有内容，两个只有外观：

（[网站阴影] [左侧菜单] [内容区域] [右侧阴影]）

当内容区域有足够的文字来扩展内容区域时，我希望右侧阴影和左侧菜单图形向下扩展到包含剩余DIV的页面。

我试过添加一个clear：两者都是父div而且什么也没做。我将在下面提供相关代码。

我应该补充说，当向父DIV添加高度％时，网页右侧的阴影会完全消失

此外，如果我添加一个非常大的高度：4000px到父div，一切都像我想的那样合作，虽然我希望网站重新调整大小到内容而不仅仅是4000px。

相关的CSS

#body_area{
    overflow:auto;
    width:1024px;
    margin:0px auto;
    clear:both;
}

#body_left{
    height:516px;
    width:25px;
    margin:0px;
    background:url("images/body_left.jpg") repeat-y;
    float:left;
}

#body_right{
    height:100%;
    width:28px;
    margin:0px;
    background:url("images/body_right.jpg") repeat-y;
    float:left;
}

#sidebar{
    height:100%;
    width:213px;
    margin:0px;
    background:url("images/side_menu.jpg") repeat-y;
    float:left;
}


#content_area{
    height:100%;
    width:758px;
    margin:0px;
    background:url("images/content_area.jpg") repeat-y;
    float:left;
}


#footer{
    height:34px;
    width:1024px;
    margin:0px auto;
    background:url("images/footer.jpg");
    float:left;
}

Answer 1

如果您需要纯css解决方案，那么实现起来将非常困难。但要轻松完成此操作，您可以使用jQuery。

编辑：从jquery cdn添加jquery库[只有当你有活动的互联网连接时才会这样说 - 如果你不知道的话]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
            var h1 = $('#sidebar').height(),
                h2 = $('#content_area').height(),
                maxNum = ( h1 > h2 ) ? h1 : h2;

            $('#body_area').css('height', maxNum);
        });
</script>

这很有效。但是有一点问题，你必须重新调整div div中body_area s的宽度。感谢

编辑：完整代码

<!DOCTYPE html>
<html>
    <head>
        <title>Lessons by Larissa</title>
        <link rel="stylesheet" type="text/css" href="http://www.leigero.com/div_expanding_issue/style.css" />
        <link class='webFontsCSSLink' href='http://fonts.googleapis.com/css?family=Comfortaa|Pacifico|Dancing+Script' rel='stylesheet' type='text/css'>
    </head>
    <body>
    <!-- Header area -->
        <div id="header_area">
            <div id="title_box">
                <div id="title_text"><h1></h1></div>
            </div>

            <div id="banner">
                <div id="banner_text">
                    <font color="#fff" face="'dancing script', arial, sans-serif" size="4">
                        Learning music is a motion of the mind…, a flowing of harmonious notes, on a wisp of melodious air. <p class="quote">-M.O'Malley</p>
                    </font>
                </div>
            </div>
            <div id="header_right"></div>
            <div id="header_left"></div>
            <div id="title_image"></div>
            <div id="nav_bar">
                <div id="nav_bar_text">
                    <!-- This is where all of your upper menu items are located. You can add more or remove the links by copying and pasting more in the appropriate sections -->

                    <ul id="nav"> <!-- This begins all the links in the top menu bar -->
                        <li class="home"><a href="http://www.leigero.com/lessons">Home</a></li>
                        <li>
                            <a href="#blah2.html">About</a>                        
                            <ul><!--Sub menu for 'Home.' These are the links that appear when you hover over 'home' -->
                                <li><a href="#1.html">Philosophy</a></li>
                                <li><a href="#2.html">Pricing</a></li>
                                <li><a href="#3.html">Add as many links as you want</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#blah3.html">Link 2</a>
                            <ul><!--Sub menu for 'Home.' These are the links that appear when you hover over 'home' -->
                                <li><a href="#1.html">Sub Link 1</a>
                                    <ul>
                                        <li><a href="#6.html">More Links </a></li>
                                        <li><a href="#6.html">More Links </a></li>
                                    </ul>
                                </li>

                                <li><a href="#2.html">Sub Link 2</a></li>
                                <li><a href="#3.html">Sub Link 3</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </div>
        </div>

    <!-- Body area -->

        <div id="body_area">
            <div id="body_left"></div>
            <div id="sidebar">
                   <p>ASLFKJASDFLSJDAFLSDKJKJFlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    </p>

            </div>
            <div id="content_area">
                    <p>ASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF </p>

            </div>
            <div id="body_right"></div>
    <!-- Footer area -->
                <div id="footer"></div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                    var h1 = $('#sidebar').height(),
                        h2 = $('#content_area').height(),
                        maxNum = ( h1 > h2 ) ? h1 : h2;

                    $('#body_area').css('height', maxNum);
                });
        </script>
    </body>
</html>

Answer 2

在尝试了所有事情之后（或者看起来似乎）我终于意识到，将3 +列扩展到最长列的高度的最佳（也可能是唯一的）方法是不使用DIV而是使用表。

DIV有他们的目的，它们很方便但是表格会自动扩展我希望DIV扩展的方式，但是表格不需要浮点数，这样也可以。 DIV中的快速表格使得超级简单

<div id="body_area">
    <table id="content">
        <tr>
            <td class="lmargin"></td>
            <td class="sidebar"></td>
            <td class="content_area">
                <div id="content_area_content">
                </div>
            </td>
            <td class="body_right"></td>
        </tr>
    </table>
<!-- Footer area -->
<div id="footer"></div>
</div>

这样表格会扩展所有相等高度的列，在表格数据中我可以添加另一个DIV来编辑边距和其内容的所有其他属性。

Answer 3

您的浏览器范围是什么？（即 - 您的访问者使用哪些浏览器？）

如果省略IE7，可以使用像这样的CSS表来解决问题......

将#footer移出#body-area
在＃body-area
将四个孩子的“display：left”替换为“display：table-cell; vertical-align：top”（＃body-left，＃body-right，＃content-area和#sidebar）
删除四个孩子的高度 - 这些类型的布局的CSS表格的一个好处是，表格的单元格一起垂直扩展

这个解决方案的一个坏处是它在MISE7中不起作用（但如果您不想排除这些用户，那么可以向IE7提供单独的Javascript，例如条件评论）

适用于“所有现代浏览器”（包括IE8），但是：）

所以试试吧：

<div id="body_area">

  <div id="body_left"></div><!-- just a left page graphic -->

    <div id="sidebar">
      some info here
    </div>

    <div id="content_area">
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
    </div>

    <div id="body_right"></div>  <!-- just a right shadow graphic -->

</div>

<div id="footer"></div>

和

#body_area{
    overflow:auto;
    width:1024px;
    height: 768px; /* just a sample value */
    margin:0px auto;
    clear:both;
    display: table;
}

#body_left{
    width:25px;
    margin:0px;
    background:url("http://www.leigero.com/div_expanding_issue/images/body_left.jpg") repeat-y;
    display: table-cell;
    vertical-align: top;
}

#body_right{
    width:28px;
    margin:0px;
    background:url("http://www.leigero.com/div_expanding_issue/images/body_right.jpg") repeat-y;
    display: table-cell;
    vertical-align: top;
}

#sidebar{
    width:213px;
    margin:0px;
    background:url("http://www.leigero.com/div_expanding_issue/images/side_menu.jpg") repeat-y;
    display: table-cell;
    vertical-align: top;
}


#content_area{
    width:758px;
    margin:0px;
    background:url("http://www.leigero.com/div_expanding_issue/images/content_area.jpg") repeat-y;
    display: table-cell;
    vertical-align: top;
}


#footer{
    height:34px;
    width:1024px;
    margin:0px auto;
    background:url("http://www.leigero.com/div_expanding_issue/images/footer.jpg");
}

当一个孩子导致父母扩展时，如何让所有子<div>扩展到父div的长度？</div>

3 个答案: