找出div高度和设置div高度

Question

我对javascript / jquery的东西很新，但我想用它做这样的事情：

我有四个这样的div并排在每个div中。 现在，如果一个人有更多的内容，它会变得更高。 即使他们没有那么多内容，我也希望其他div也高。 所以基本上我希望脚本通过div并检查高度并将所有div高度设置为与最高div相同。 希望你明白:)

Answer 1

我在SLaks代码中遇到NaN错误。 给maxHeight一个初始值为0就可以了。

var maxHeight = 0;
$('div')
  .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
  .height(maxHeight);

谢谢SLaks！

Answer 2

您可以使用jQuery的height方法来获取和设置元素的高度。

您需要遍历元素，找到最高的元素，然后设置所有元素的高度。

var maxHeight;
$('div')
    .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
    .height(maxHeigt);

将'div'替换为选择要均衡的元素的jQuery选择器。

Answer 3

<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>

看这个例子

Answer 4

这直接来自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();
});

Answer 5

这是简单的代码

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");

Answer 6

我相信你正在寻找这个插件：Benize Alman的equalizeBottoms

Answer 7

那么你可以得到并设置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);

Answer 8

哇 - 人们真的想把jQuery技巧强加到这个 - 你可以用CSS做到这一切。 来自stopdesign ：

使用CSS创建液体布局时，请记住以下几点：

• Double-div专栏：尽管我讨厌使用额外的标记，但是没有更简单的方法来确保跨多个浏览器的最大兼容性，而不是为每列使用两个div。 外部div用于设置宽度。 内部div用于设置填充以在每列之间创建白色空间的沟槽。

• 使用固定宽度的檐槽（或基于类型大小的檐槽宽度）：当列宽度独立于列填充应用时，如上所述，百分比可用于宽度，像素或ems可用于填充。 这一点，不用担心一列撞到另一列的底部，或者没有故意调整列的大小，因此它们总是适合页面。 尽管随着浏览器变宽或变窄，列宽会发生变化，但页面上的文本通常保持相同的大小。 使文本感觉舒适所需的空白量更多地取决于类型的大小，而不是包含该文本的列的大小。

• 避免使用固定宽度的列：尽可能使所有列的宽度均为百分比。 将侧边栏和导航列视为一个静态宽度很容易，让主列或中间列进行所有扩展。 这会快速破坏可能经过精心挑选的任何比例，因为固定宽度的列在大分辨率下看起来微不足道。 或者宽的固定宽度的侧边栏可能会变得令人生畏，在较窄的浏览器宽度下过度供电主柱。

诀窍是创建一个超宽的背景图像（或三个列布局的两个图像，因此该技术的滑动门性质）。 图像部分不透明，部分透明。 它在父容器内垂直平铺，就像Dan的Faux Columns技术一样。 图像的不透明部分应与其帮助创建的列的百分比相匹配，以便可以使用相同的背景位置值进行定位。 这允许从不透明到透明的过渡成为背景位置的轴点。 可以基于HTML内的内容顺序改变图像内的不透明部分的位置，以产生几乎任何所需的效果。

Answer 9

当然，如果您想要的只是修复等高问题，那么您需要的是One True Layout：

http://fu2k.org/alex/css/onetruelayout/example/interactive