Question

好吧，所以我有一个页面，在包装器中设置了3个div，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>

<div id="wrapper" style="width:608px;">

<div id="leftcolumn" style="float: left; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

<div id="rightcolumn" style="float: right; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

<div id="lefboottomtcolumn" style="clear: left; float: left; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

</div>

</body>

现在，所有3个div都可以随着内容的不同而自由扩展，但是如果 - 如果右列的内容非常小而且因此小于2个左列的组合 - 那么我非常喜欢它 - 右列的高度或最小高度（以较合适的为准）可以调整以匹配其他列，但只要内容需要它，仍然能够扩展到超过该点。并且应该注意的是，如果右列是最高的，其他的不适应它，那些总是保持不变。

使用javascript动态更改右列的最小高度可能是要走的路，但我没有经验编码这样的东西。我已经看到很多脚本可以使列均匀，但这不是我在这里寻找的结果。我尝试根据我的需要调整这些脚本无济于事...我不确定如何获得两个左列的总高度（中间也有10px的余量）。

Answer 1

可能有一种CSS方法可以对此进行排序，但这需要您更改HTML。

我会选择一个简单的jQuery解决方案，如下所示：

<title></title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<body>

<div id="wrapper" style="width:608px;">

<div id="leftcolumn" style="float: left; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

<div id="rightcolumn" style="float: right; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

<div id="lefboottomtcolumn" style="clear: left; float: left; border:2px solid #000000; width: 300px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

</div>
<script>
var totalHeightLeft = $('#leftcolumn').height() + $('#lefboottomtcolumn').height() + 4 //for the borders

$('#rightcolumn').css('min-height',totalHeightLeft + 'px')
</script>
</body>

基本上它抓住了2个左边元素的高度，它修正了边框的额外4px（在2个左边元素之间），然后设置了righter元素的最小高度。这个解决方案很可能在IE7中不起作用，因为我认为IE7中没有使用min-height属性。

更改内容div的最小高度以动态匹配其他div

1 个答案: