使 Div 高度一致 | CSS-Tricks

Sgobin

# 2009 年 9 月 30 日

我不知道为什么。它在离线时可以工作，但是当我将网站放到服务器上时，它使高度比内容小。有时它会在 Safari 或 Firefox 中重新加载浏览器时更改高度。

Ramil

永久链接至评论# 2012 年 6 月 22 日

我认为，这是因为您的页面没有完全加载。尝试在窗口加载后启动此代码。

Michael Hogenmiller

# 2010 年 3 月 24 日

有趣的是，我遇到了同样的问题。在硬盘上工作得很好，但是当我将文件上传到服务器时，由于某种原因，脚本没有以相同的方式工作。它实际上将每个 div 的高度设置为第一个的高度。

Michael Hogenmiller

永久链接至评论# 2010 年 3 月 24 日

…直到我刷新。

真爱浏览器缓存。

Josh

# 2011 年 7 月 19 日

这太好了！谢谢您！

Josh

永久链接至评论# 2011 年 7 月 20 日

…实际上我有一个小问题。如何在多个 div 上实现它？

例如，我在页面上有一组 3 个 div，每组 2 个 div。我只希望这组 div 相等，而不是页面上的所有 div。我不介意使用多个类，但最短的写法是什么。

div.equalize-1、div.equalize-2、div.equalize-3 是我的类。

我将这些类分配给了我想使其高度一致的每组 div。

任何提示都会很棒，谢谢。

Chris

# 2011 年 9 月 23 日

// Plugin
$.fn.equalize = function() {
	var maxHeight = 0;
	
	return this.each(function(){
		var $this = $(this);
		
		if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
		
		$this.height(maxHeight);
        });
};


// Use generic class 
$('.equalize').equalize();

OR

$('div.equalize-1, div.equalize-2, div.equalize-3').equalize();

Chris

永久链接至评论# 2011 年 9 月 23 日
哎呀，必须替换以下行
```
if ($this.height() > maxHeight) { maxHeight = $this.height(); }
```
忘了使用“$this”变量！

Toby Stokes

# 2012 年 2 月 23 日

我认为您的插件版本不太正确 - 它似乎在循环遍历所有选择器之前就应用了当前的 maxHeight，因此它仅对最高选择器之后的元素正确。
不过原始版本很好

Mattia

# 2012 年 8 月 16 日

谢谢 Chris，这太容易了，我自己也能想到。

Eric

# 2012 年 8 月 29 日

这对于使布局正常工作非常重要。抱歉我对 JS 如此陌生，但我需要将两个 div 等高。在 CSS 中，我将我的 div id 称为 #slides 和 #product。我只需要将其插入括号中吗，就像这样？它似乎没有做任何事情。

谢谢您，

var maxHeight = 0;

$(‘#slides’).each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(‘#product’).height(maxHeight);

Eric

# 2012 年 9 月 12 日

有人可以帮我理解如何填补空白吗？我有两个并排的 div：#slideshow 和 #menuVertical，我将它们包装在 .equalize 中。我只是不明白在哪里将它们放入插件中。

非常感谢。

Adam

# 2012 年 12 月 11 日

这会在浏览器调整大小的时候起作用吗？

Derek

# 2013 年 7 月 1 日

这是一篇旧帖子，但我能够在一行中做到这一点，同时设置变量。

var h = Math.max.apply(Math, $.map($(‘.el’),function(el){return $(el).height()}));

Raviraj

# 2013 年 8 月 14 日

$(“.equalize”).css({‘height’:$(“.equalize”).height()})

Brendan

# 2013 年 11 月 22 日

使用了这个片段。感谢您提供它！

我不得不扩展它，因为我在响应式设计中使用它。所以感谢一个 Stack Overflow 答案，我的脚本在用户暂停或停止调整窗口大小时被触发。

觉得其他人可能也有同样的问题，所以我想分享一下！

Robert

# 2014 年 6 月 13 日

@Chris
您的插件版本不正确：如果后面的框更高，只有此框和所有后面的框将调整大小。

$.fn.equalize = function() {
    var maxHeight = 0;
    this.each(function(){
        if( $(this).height() &gt; maxHeight ) {
            maxHeight = $(this).height();
        }
    });
    this.height(maxHeight);
};
$('div').equalize();

Robert

# 2014 年 6 月 13 日

这是一个扩展，仅使特定容器内的特定元素等高

$.fn.equalize = function(toBeEqualizedChildSelector) {
    var maxHeight = 0;
    this.find(toBeEqualizedChildSelector).each(function(){
        if( $(this).height() &gt; maxHeight ) {
            maxHeight = $(this).height();
        }
    });
    this.find(toBeEqualizedChildSelector).height(maxHeight);
};
$('#menu').equalize('.children');

JOHN

# 2015 年 5 月 28 日

我修改了插件，它对我来说运行良好。

$.fn.equalize = function(){
    var maxHeight = 0;
    this.each(function(){
        var $this = $(this);
        if($this.height() > maxHeight){maxHeight = $this.height();}
    });

    return this.each(function(){
        $(this).height(maxHeight);
    });
};

toancan

永久链接至评论# 2021 年 6 月 23 日

嗨约翰，我使用您的代码。它对
$(‘.equalize’).equalize();
但对
$(‘div.equalize-1, div.equalize-2, div.equalize-3’).equalize();

yogendra

# 2015 年 7 月 28 日

嗨，

我使用了相同的函数，但它在第一次尝试时不起作用。
我需要刷新网站才能看到它工作。
我应该使用 document.ready 还是 window.onload。
为什么这个问题在服务器的网站上发生？是代码排列导致问题吗？

Viki

# 2016 年 7 月 14 日

我正在使用以下内容，我在 document.ready 和 window.resize 中都执行此操作
它大部分时间都有效，但很少不起作用.. 与浏览器缓存有关吗？

http://codepen.io/vikired/pen/QEaKav

Rafael M

# 2017 年 3 月 16 日

哇！这为我节省了很多时间，因为浮动破坏了我的 div，因为高度不等。感谢您提供它！

James

# 2018 年 7 月 6 日

对于任何寻找可行的响应式解决方案的人来说，它可以解决 Robert 提到的问题，那么这应该可以解决问题！请注意，您想要等高的所有元素必须具有相同的类（.same-height）。

如果您希望页面上的另一部分元素使用此功能，则必须在这些元素上使用另一个类（.same-height2）等等…

(.same-height) 类仅在屏幕宽度超过 700 像素时有效。很少有情况下您会希望所有元素在低于此屏幕大小的情况下都具有相同的高度，除非元素仍在同一行中。

如果您希望元素在移动设备上也等高，那么只需使用类（.same-height-all）。“all”表示“所有屏幕尺寸”。

以下是如何使用它的示例

以下是要粘贴到您的 js 文件中的代码

       jQuery(window).load( function() { 


        // Same height boxes
        jQuery.fn.sameheight = function() {

            var maxHeight = 0;

            jQuery(this).each( function() {

                // reset the height
                jQuery(this).css({'height':'auto'});
                var thisHeight = jQuery(this).height();

                if ( thisHeight > maxHeight ) {
                    maxHeight = thisHeight;
                }

            });

            jQuery(this).each( function() {     
                jQuery(this).height(maxHeight);
            });

        };      


        jQuery('.same-height-all').sameheight();
                jQuery('.same-height-all2').sameheight();
                jQuery('.same-height-all3').sameheight();
                jQuery('.same-height-all4').sameheight();

        var width = jQuery(window).width();
        if ( width > 700 ) {

            jQuery('.same-height').sameheight();
            jQuery('.same-height2').sameheight();
            jQuery('.same-height3').sameheight();
            jQuery('.same-height4').sameheight();
        }

        jQuery( window ).resize(function() {

            jQuery('.same-height-all').sameheight();
                        jQuery('.same-height-all2').sameheight();
                        jQuery('.same-height-all3').sameheight();
                        jQuery('.same-height-all4').sameheight();

            var width = jQuery(window).width();
            if ( width > 700 ) {
                jQuery('.same-height').sameheight();
                jQuery('.same-height2').sameheight();
                jQuery('.same-height3').sameheight();
                jQuery('.same-height4').sameheight();
            } else {
                jQuery('.same-height').css({'height':'auto'});
                jQuery('.same-height2').css({'height':'auto'});
                jQuery('.same-height3').css({'height':'auto'});
                jQuery('.same-height4').css({'height':'auto'});
            }

        }); 


    });

Dillon

永久链接至评论# 2018 年 7 月 19 日

这是唯一对我有用的。完美的作品，感谢您！很好地排除了移动设备，因为所有内容都在该布局中堆叠起来

JC

# 2019 年 3 月 3 日

对于响应式网站

我认为您可以在代码开头添加 $(“div”).removeAttr(“style”);，同时添加调整大小事件监听器。这样，在窗口调整大小期间，高度值将重置。

aastha

# 2019 年 11 月 19 日

它很容易工作，只需替换我的类名它就起作用了。谢谢。
附注：即使它很简单，您也可以为初学者添加解释。

评论

发表评论 取消回复

发表评论取消回复