css - 我如何让所有孩子
当一个孩子导致父母扩大时，s扩大到父母div的长度？

Question

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

问题：我有一个带有四个子 DIV 的父 DIV，其中两个包含内容，两个仅用于外观：

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

当内容区域有足够的文本来扩展内容区域时，我希望右阴影和左菜单图形与其余的 DIV 一起向下扩展页面。

我尝试将 clear:both 添加到父 div 并且什么都不做。我将在下面包含相关代码。

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

此外，如果我向父 div 添加一个非常大的 height:4000px ，一切都会按照我的意愿进行合作，尽管我希望网站重新调整内容的大小而不仅仅是 4000px。

相关的 HTML：

<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.
    </div>

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

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

以及相关的 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;
}

score 1 · Accepted Answer

如果您需要一个纯粹的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>

这很好用。但是有个小问题，你得重新调整divdiv里面s的宽度。body_area谢谢

编辑：完整代码

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

score 0 · Accepted Answer

在尝试了一切（或者看起来如此）之后，我终于意识到，将 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 来编辑其内容的边距和所有其他属性。

score 0 · Accepted Answer

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

如果你忽略了 IE7，你可以通过使用这样的 CSS 表来解决这个问题......

将#footer移出#body-area
设置显示：#body-area 上的 table-cell
将四个子项（#body-left、#body-right、#content-area 和 #sidebar）的“float:left”替换为“display:table-cell;vertical-align:top”
删除四个孩子的高度 - 对于这些类型的布局，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");
}

css - 我如何让所有孩子当一个孩子导致父母扩大时，s扩大到父母div的长度？

3 回答 3

Related

Reference

css - 我如何让所有孩子
当一个孩子导致父母扩大时，s扩大到父母div的长度？