将DIV高度设置为等于另一个DIV

I have two DIVs, .sidebar and .content and I want to set .sidebar to 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 .content I 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!

谢谢！

7 个解决方案

#1

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选择器之前缺少一个尾随括号。

#2

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的两种方法，以及一种使用脚本来实现此目的的方法：

This article makes equal column heights without CSS hacks.

本文在没有CSS hacks的情况下实现了相同的列高度。
Here is a method to get equal column heights using a CSS hack.

这是一种使用CSS hack获得相等列高的方法。
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.

最后，如果你想使用javascript / jQuery，你可以使用jQuery .map（）页面的均衡高度脚本作为演示。
```
$.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();
```

#3

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.

至于你的具体问题，简短的回答是：你不伸展侧边栏。你不必。您设置了一个看起来像侧边栏的背景，让它看起来像一个列。就像Victor Welling所说的那样，这是一个人造柱。

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

以下是显示如何执行此操作的众多网页之一：

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来解决那种演示问题。

#4

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以保持相同的高度可以执行以下操作。

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

获得主div的高度;我猜这是.content div;并将其分配给变量。

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

var setHeight = $（“。content”）。height（）;
then you can use jQuery to get the sidebar and assign the content height using the variable.

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

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

$（ “侧边栏”），高度（自动调用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高度）。

#5

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

我想你要找的是人造柱。

#6

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

#7

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();
});

#1