CSS：如何让左浮动div动态调整高度？

本文介绍了CSS：如何让左浮动div动态调整高度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

How can I make my floated left div with a static content to adjust automatically its height to the same height of the right floated div with a dynamic content?

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

So what I am trying to accomplish is that the both left and right div will have the same height (left div adjusting automatically to the right div's height)

下面是示例代码

提前感谢：）

干杯，
标记

<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解决方案）：

Here is the working CSS solution (thanks to pdr for the 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>

这篇关于CSS：如何让左浮动div动态调整高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！