jQuery 设置一个 DIV 高度等于另一个 DIV

Set a DIV height equal with of another DIV

提问by George

I have two DIVs, .sidebarand .contentand I want to set .sidebarto keep the same height with the .content.

我有两个 DIV，.sidebar并且.content我想设置.sidebar为与 .content 保持相同的高度。

I've tried the following:

我尝试了以下方法：

$(".sidebar").css({'height':($(".content").height()+'px'});

$(".sidebar").height($(".content").height());

var highestCol = Math.max($('.sidebar').height(),$('.content').height());
$('.sidebar').height(highestCol);

None of these are working. For the .contentI don't have any height since will increase or decrease based on the content.

这些都不起作用。对于.content我没有任何高度，因为会根据内容增加或减少。

Please help me. I have to finish up a web page today and this (simple) thing is giving me headaches.

请帮我。我今天必须完成一个网页，这（简单）的事情让我头疼。

Thank you!

谢谢！

回答by Allerion

The reason your first example isn't working is because of a typo:

您的第一个示例不起作用的原因是因为输入错误：

$(".sidebar").css({'height':($(".content").height()+'px'});

should actually be

实际上应该是

$(".sidebar").css({'height':($(".content").height()+'px')});

you're missing a trailing bracket from before the .content selector.

您缺少 .content 选择器之前的尾括号。

回答by Mottie

eje211 has a point about using CSS to style your page. Here are two methods to use CSS, and one method using scripting to accomplish this:

eje211 有一个关于使用 CSS 来设置页面样式的观点。这里有两种使用 CSS 的方法，一种使用脚本来完成此操作的方法：

1. This article makes equal column heights without CSS hacks.

2. Here is a method to get equal column heights using a CSS hack.

3. and lastly, if you do want to use javascript/jQuery, you could use the equalize heights script that the jQuery .map()page has as a demo.

   $.fn.equalizeHeights = function(){
     return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
   }
   

   then just use it as follows:

   $('.sidebar, .content').equalizeHeights();
   

1. 这篇文章在没有 CSS 技巧的情况下制作了相等的列高。

2. 这是使用 CSS hack获得相等列高的方法。

3. 最后，如果您确实想使用 javascript/jQuery，您可以使用 jQuery .map()页面中的均衡高度脚本作为演示。

   $.fn.equalizeHeights = function(){
     return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
   }
   

   然后只需按如下方式使用它：

   $('.sidebar, .content').equalizeHeights();
   

回答by eje211

In my experience, it's a very, very bad idea to use Javascript for this sort of thing. The web should be semantic. It isn't always, but it should. Javascript is for interactive functionality. HTML is for content. CSS is for design. You CAN use one for the the other's purpose, but just because you CAN do something doesn't mean you SHOULD.

根据我的经验，将 Javascript 用于此类事情是一个非常非常糟糕的主意。网络应该是语义化的。并非总是如此，但应该如此。Javascript 用于交互功能。HTML 用于内容。CSS是用于设计的。您可以将一个用于另一个目的，但仅仅因为您可以做某事并不意味着您应该这样做。

As for your problem specifically, the short answer is: you don't stretch the sidebar. You don't have to. You set up a background that looks like your sidebar and let it look like a column. It's, as Victor Welling put it, a faux-column.

至于您的具体问题，简短的回答是：您不要拉伸侧边栏。你不必。您设置了一个看起来像侧边栏的背景，让它看起来像一列。正如维克多·威灵所说，它是一个假柱。

Here's one of many web pages that show how to do it:

这是展示如何执行此操作的众多网页之一：

http://www.alistapart.com/articles/fauxcolumns/

http://www.alistapart.com/articles/fauxcolumns/

But resort it to Javascript for that sort of presentation issue would be "wrong" even if it worked.

但是，即使它有效，将它用于此类演示问题的 Javascript 也是“错误的”。

回答by andre mcgruder

I used this technique to force the footer element to remain at the bottom of the page based on the height of another element. In your case you would; getting sidebar and content divs to keep the same height can do the following.

我使用这种技术根据另一个元素的高度强制页脚元素保留在页面底部。在你的情况下，你会；使侧边栏和内容 div 保持相同的高度可以执行以下操作。

1. Get the height of the main div; I'm guessing that is the .content div; and assign it to a variable.

   var setHeight = $(".content").height();

2. then you can use jQuery to get the sidebar and assign the content height using the variable.

   $(".sidebar").height(setHeight);

1. 获取主div的高度；我猜那是 .content div；并将其分配给一个变量。

   var setHeight = $(".content").height();

2. 然后您可以使用 jQuery 获取侧边栏并使用变量分配内容高度。

   $(".sidebar").height(setHeight);

It is as simple as that. The final code will look like this.

它是如此简单。最终代码将如下所示。

`var setHeight = $(".content").height();`
`$(".sidebar").height(setHeight);`

Here are more examples.Set div height using jquery (stretch div height).

这里有更多的例子。使用 jquery 设置 div 高度（拉伸 div 高度）。

回答by Tahir

$(window).resize(function(){
   var height = $('.child').height();
   $('.parent').height(height);
})

$(window).resize(); //on page load

.parent{
  background:#ccc;
  display:inline-block;
  width:100%;
  min-height:100px;
}
.child{
  background:red;
  width:50%;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
  hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute
  </div>
</div>

回答by Victor Welling

I think what you're looking for is faux columns.

我认为你要找的是假列。

回答by doris pelger

Works like a charm:

奇迹般有效：

function sidebarHandler() {
  jQuery(".sidebar").css({'height':(jQuery(".content").height()+'px')});
  jQuery(".sidebar").height(jQuery(".content").height());
  var highestCol = Math.max(jQuery('.sidebar').height(),jQuery('.content').height());
  jQuery('.sidebar').height(highestCol);
}

initialize it with all your other jQuery stuff:

用你所有的其他 jQuery 东西初始化它：

jQuery(document).ready(function() { 
  sidebarHandler();
});