0

好的，所以我在一个包装器中设置了一个包含 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 的边距）。

4

1 回答 1

0

可能有一种 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 个左侧元素之间），然后在右侧元素上设置最小高度。这个解决方案很可能在 IE7 中不起作用，因为我相信 IE7 中没有使用 min-height 属性。

于 2013-06-07T01:41:07.440 回答