CSS:如何使左浮动div动态调整高度？

Question

CSS:如何使左浮动div动态调整高度？

如何使用静态内容使我的浮动左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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

mar*_*t15 13

这是工作的CSS解决方案(感谢链接的 pdr ):

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Nas*_*loo 5

如果我是你,我会使用一个简单的CSS技巧.我将.Left和.Right的高度分配给像这样的css类

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

Run Code Online (Sandbox Code Playgroud)

请注意,只要您的高度超过200px,上面的代码就会使用,然后它会覆盖200px的值.

希望这个帮助

用Javascript完成答案

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

Run Code Online (Sandbox Code Playgroud)

每当你完成正确div的增加时你就必须调用它

归档时间：	15 年，10 月前
查看次数：	78446 次
最近记录：	14 年，7 月前