logo标签列表

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

csshtml
16

如何使我的左浮动的固定内容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>
5个回答
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>
我无法将其设置为已接受的答案。它会提示“您可以在21小时内接受您的答案。”我想我只能等待 :) - marknt15
这个解决方案只适用于IE8、FF、Chrome、Safari和Opera。我刚发现在IE 7中不起作用。我需要找到另一个解决方案或重新设计整个页面。(-_-) - marknt15
4

如果我是你，我会使用一个简单的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的尺寸增加后，你需要调用它。
我尝试了你的解决方案，但是它是错误的。这是截图：http://i.imgur.com/UzIoY.jpg如果右侧的div动态添加内容，则左侧div的高度将不再调整。 - marknt15
这是因为您将“Right”设置为“Auto”（我的意思是您正在自动增加它，并且希望自动增加不相关的元素“a”。要执行此操作，必须使用JavaScript。 - Nasser Hadjloo
@Mark - 我已经用JavaScript编辑了我的答案，请查看。 - Nasser Hadjloo
你的JS答案看起来很不错。我已经有一个可行的CSS解决方案了，但我也会尝试你的JS解决方案，因为它似乎是“精确高度”，相比我将要发布的CSS解决方案 :) 谢谢您，先生 :D - marknt15
2
1

尝试以下代码，我已经在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浏览器中无法运行。不过还是谢谢 :) - marknt15
1
这里列出了若干个选项。

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

通常来说，我认为你可能需要问自己是否真的需要两列。你最好将静态内容放在父 div 中，动态内容放在子 div 中（[编辑] 或反之亦然）。
非常感谢pdr。我会发布我的解决方案。你的链接带领我找到了这个解决方案：http://www.ejeliot.com/samples/equal-height-columns/example-6.html - marknt15
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接