我对 javascript/jquery 的东西很陌生，但我想用它做这种事情：
我有四个像这样并排的 div，每个都有内容。现在，如果一个内容更多，它就会被拉伸得更高。我想让其他 div 也一样高，即使它们没有那么多内容。所以基本上我希望脚本通过 div 并检查高度并将所有 div 高度设置为与最高 div 相同。希望你明白:)
【问题讨论】：
标签： javascript jquery css class
我收到 SLaks 代码的 NaN 错误。给 maxHeight 一个初始值 0 就可以了。
var maxHeight = 0;
$('div')
.each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
.height(maxHeight);
感谢 SLaks！
【讨论】：
您可以使用 jQuery 的height 方法来获取和设置元素的高度。
你需要遍历元素，找到最高的，然后设置所有元素的高度。
var maxHeight;
$('div')
.each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
.height(maxHeigt);
将'div' 替换为jQuery selector，以选择要均衡的元素。
【讨论】：
<script>
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
});
</script>
【讨论】：
这直接来自 jQuery 文档页面：
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('input').click(function(){
$('div').equalizeHeights();
});
【讨论】：
我相信你正在寻找这个插件： equalizeBottoms by Ben Alman
【讨论】：
这是简单的代码
var heights = $("element").map(function ()
{
return $(this).height();
}).get(),
MaxHeight = Math.max.apply(null, heights);
或
var highest = null;
var hi = 0;
$(".testdiv").each(function(){
var h = $(this).height();
if(h > hi){
hi = h;
highest = $(this);
}
});
highest.css("background-color", "red");
【讨论】：
哇——人们真的很想把 jQuery 技巧强加到这个中——你可以用 CSS 来做这一切。来自stopdesign：
使用 CSS 创建流动布局时，我谨记以下几点：
双 div 列：尽管我讨厌使用额外的标记，但要确保跨多个浏览器的最大兼容性，没有比为每列使用两个 div 更简单的方法了。外部 div 用于设置宽度。内部 div 用于设置填充以在每列之间创建空白间距。
使用固定宽度的装订线（或基于类型大小的装订线宽度）：当列宽独立于列填充应用时，如上所述，百分比可用于宽度，像素或 em 可用于填充.这样，不必担心一列会撞到另一列的底部，也不必故意缩小列的大小，以便它们始终适合页面。即使列宽随着浏览器变宽或变窄而变化，页面上的文本通常保持相同的大小。使文本感觉舒适所需的空白量更多地取决于类型的大小，而不是包含该文本的列的大小。
避免固定宽度的列：尽可能将所有列设置为百分比宽度。很容易将侧边栏和导航栏视为一种静态宽度，并让主栏或中间栏完成所有扩展。这会很快破坏任何可能经过仔细选择的比例，因为固定宽度的列在大分辨率下看起来很弱。或者，固定宽度的宽侧边栏可能会变得令人生畏，在较窄的浏览器宽度下会压倒主列。
诀窍是创建一个超宽背景图像（或两个图像用于 3 列布局，因此是滑动门技术的本质）。图像部分不透明，部分透明。它在父容器内垂直平铺，就像 Dan 的 Faux Columns 技术一样。图像的不透明部分应与其帮助创建的列的百分比相匹配，以便可以使用相同的背景位置值对其进行定位。这允许从不透明到透明的过渡成为背景位置的轴点。图像中不透明部分的位置可以根据 HTML 中的内容顺序进行更改，以产生几乎任何所需的效果。
【讨论】：
当然，如果您只想解决等高问题，您想要的是 One True Layout：
【讨论】：
您可以使用height() 获取和设置高度
height = $('#id').height()
遍历元素并检查高度，例如：
$elements = $('.container');
var max_height = 0;
for ($element in $elements) {
if (max_height > $element.height()) max_height = $element.height();
}
$elements.height(max_height);
【讨论】：
height() 的次数超出了必要的次数。