jQuery 或 JavaScript 使跨多个容器的 DIV 列具有相同的高度
Posted
技术标签:
【中文标题】jQuery 或 JavaScript 使跨多个容器的 DIV 列具有相同的高度【英文标题】：jQuery or JavaScript to make DIV columns same height across across several containers 【发布时间】：2013-05-07 03:15:08 【问题描述】：我有许多容器 div，每个容器 div 都包含其他列 div，我尝试了一个 javascript 脚本来使半列 div 在相同的高度上调整大小。这已经奏效，但这意味着页面上的所有另一半 div 都将调整到该高度。请参阅下面的屏幕截图。半个 div 具有相同的 ID，但在不同的容器中。是否有 jQuery 或 JavaScript 代码可以调整每个容器内 div 的高度？
在屏幕截图中，顶行是一个容器，底行是另一个容器中的 div。我希望底行 div 调整大小以匹配该单独容器中最高 div 的高度。但我想锻炼几个容器，它们都在页面上调整内部 div 的大小。
部分代码：
<style>
#pagewidth:85%; text-align:center;margin:auto;
#rowwidth:100%;background:yellow;margin-bottom:1%;
#containerheight: auto;display: table;float:left;
#headerwidth:100%;background-color: rgb(0, 143, 213); height:50px;
#fullwidth:99%;margin:0.5%;background-color:skyblue;
.halfwidth:48%; margin:0.5%;padding:0.5%;float:left; background-color:#1589FF;display: table-cell;
#thirdwidth:32.333%; float:left; margin:0.5%; background-color:skyblue;
#th2width:65.66%; float:left; margin:0.5%; background-color:skyblue;
#quarterwidth:23%; margin:0.5%;padding:0.5%; float:left; background-color:blue;height:100px
</style>
<script type='text/javascript'>
$(window).load(function()
$(window).resize( function()
var $column = $('.column'),
maxHeight = 0;
$column.each( function()
$(this).removeAttr('style');
if($(this).height() > maxHeight)
maxHeight = $(this).height();
);
$column.height(maxHeight);
).trigger('resize');
);
</script>
</head>
<body>
<div id="full">Menu</div>
<div id="th2">2/3</div><div id="third">Third</div>
<div id="container">
<div class="half column"><h1>About</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>
<div class="half column"><h1>News</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.
</div>
</div>
<div id="container2">
<div class="half column">Half<br>more info</div><div id="quarter">Quarter</div><div id="quarter">Quarter</div>
</div>
</div>
【问题讨论】：
请至少向我们提供您的 html。所以你知道，一个 html 元素应该有唯一的 ID，并且根据标准，该 ID 在每个页面中不应出现超过一次。 谢谢，我已经添加了代码。 谢谢，但我仍然不确定您想要实现什么，在您的代码示例中，两个半列都在同一个容器中。两个半柱的高度应该相同吗？您想将哪些其他元素调整为相同的高度？其他列也会在容器（行）内吗？ 在底部的代码中我有一个新的容器2。我希望该容器中的“一半” div 仅匹配该容器中任何 div 的高度。当前的 javascript 将所有半个 div 的大小调整为整个页面的相同大小。谢谢。 嗯，我认为你可以在没有 JavaScript 的情况下做到这一点。使用 height 100% 并在父容器上放置一个 clearfix 类，父容器将拉伸到最高子容器的高度。然后将您的 clearfix 类定义为 clear:both。关注这个：webtoolkit.info/css-clearfix.html 【参考方案1】：如果您不想为每个容器编写一行并遍历其列，则解决问题的一种方法是将类更改为具有 id 为 containerX 的元素上的容器。喜欢：
$('.container').each(function(index, elem)
var maxHeight;
$(elem).find('.column').each(function(index, elem)
var height = $(elem).height();
if(height > maxHeight)
maxHeight = height;
);
$(elem).find('.column').height(maxHeight);
);
可能存在一些语法错误，但您应该看到我在这里尝试做的事情。这样，您只会调整循环通过的当前容器内的列的大小。但我想知道；您是否尝试将列的高度设置为 100%？无论如何，它们不应该比它的父级大，所以如果没有必要，它不会填满整个页面。
祝你好运！
【讨论】：
谢谢我尝试了不同的方法，但我认为 jQuery 是答案。如果我有几行称为容器（1,2,3 等）并循环代码以在每个容器上执行相同的调整大小，那么输出应该是统一的。【参考方案2】：虽然已回答，但我为您准备了另一种 jQuery 风格：
(function(l)
var mh=0, ah;
$(l).each(function(i, e)
ah = $(e).height();
mh = (ah > mh)? ah: mh;
).height(mh);
)('ul.list li')
通过改变选择器，它是可重用的
【讨论】：
以上是关于jQuery 或 JavaScript 使跨多个容器的 DIV 列具有相同的高度的主要内容，如果未能解决你的问题，请参考以下文章
为 jQuery UI Droppable 的相交容差构建匹配选项
在 Javascript/ajax 或 jquery 中提交多个表单
如何在 Javascript 或 Jquery 中处理具有多个循环的大量数组？