CSS：如何使左浮动 div 动态调整高度？ [复制]答案

【问题标题】：CSS: How to make left float div to adjust height dynamically? [duplicate]CSS：如何使左浮动 div 动态调整高度？ [复制]
【发布时间】：2011-01-20 20:42:45
【问题描述】：

如何使我的浮动左侧 div 与静态内容自动调整其高度与右侧浮动 div 与动态内容的高度相同？

所以我想要实现的是左右 div 将具有相同的高度（左 div 会自动调整到右 div 的高度）

下面是示例代码。

提前致谢:)

干杯，标记

<html>
<head>
    <style type="text/css">
        body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            /*min-height:100%;*/
            padding:5px;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }
        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">float left div here only static content</div>
        <div class="right">
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>

【问题讨论】：

标签： css html

【解决方案1】：

这是有效的 CSS 解决方案（感谢 pdr 提供link）：

<html>
<head>
    <style type="text/css">
        html, body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            padding:5px;
            overflow:hidden;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }

        /* a solution but doesn't work in IE */
        /*
        .left, .right {
            min-height: 100px;
            height: auto;
        }
        */

        .left, .right {
            padding-bottom:8000px;
            margin-bottom:-8000px;
            background:none repeat scroll 0 0 lightblue;
        }

        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">float left div here only static content</div>
        <div class="right">
            float right div dynamic content here<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>

【讨论】：

我无法将其设置为可接受的答案。它提示“您可以在 21 小时内接受您的答案”。我想我会等待:)
此解决方案仅适用于 IE8、FF、Chrome、Safari 和 Opera。我刚刚发现这在 IE 7 中不起作用。我需要找到另一个解决方案或者只是重新设计整个页面。 (-_-)

【解决方案2】：

如果我是你，我会使用一个简单的 CSS 技巧。我会在这样的 CSS 类中为 .Left 和 .Right 分配高度

.Left, .Right
{
    min-height: 200px; /*because of .Left*/
    height: auto;
}

请注意，只要您的高度超过 200 像素，上面的代码就会使用，然后它将覆盖 200 像素的值。

希望有帮助

用 Javascript 完成答案

<script>
function increaseHeight()
{
   Document.getElementById('LeftDivID').style.height = Document.getElementById('RightDivID').style.height;
}
</script>

你必须在你完成增加右 div 的大小时调用它

【讨论】：

我尝试了您的解决方案，但它是错误的。截图如下：i.imgur.com/UzIoY.jpg如果右div动态添加内容，那么左div的高度就不会再调整了。
这是因为您将 Right 设置为 Auto（我的意思是您正在自动增加它并希望自动增加一个不相关的元素。要执行此操作，您必须使用 javascript。
@Mark - 我已经用 javascript 检查了我的答案。
您的 JS 答案看起来不错。我已经有一个可行的 CSS 解决方案，但我也会尝试你的 JS 解决方案，因为与我将发布的 CSS 解决方案相比，它看起来“精确高度”:) 谢谢先生：D

【解决方案3】：

A List Apart 有几篇关于这个主题的优秀文章，例如Faux Columns 和Multi-column layouts climb out of the box

【讨论】：

【解决方案4】：

这里列出了许多选项

http://www.ejeliot.com/blog/61

一般来说，我想您可能想问问自己是否真的想要两列。可能你最好在父 div 中使用静态内容，在子 div 中使用动态内容（[编辑]，反之亦然）。

【讨论】：

非常感谢 pdr。我将发布我的解决方案。您的链接让我找到了这个解决方案：ejeliot.com/samples/equal-height-columns/example-6.html

【解决方案5】：

尝试以下代码，我尝试使用 firefox，但希望它能在大多数浏览器上运行

    <html>
<head>
    <style type="text/css">
        body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            /*min-height:100%;*/
            padding:5px;
        }
        .parent_new {
            border:1px solid red;
            width:530px;            
            padding:5px;
            display: table-cell;
        }
        .row_level
        {
            display:table-cell;
        }
        .cell-level {
            display:table-cell;
            border:1px solid red;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
            display:table-row;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }
        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent_new">
        <div class="row_level">
        <div class="cell-level">float left div here only static content
        </div>
        <div class="cell-level">
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
         </div>
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>

【讨论】：

不幸的是，我对此进行了测试，但它在 IE 浏览器中不起作用。不过谢谢:)