Set a DIV height equal with of another DIV

Question

I have two DIVs, .sidebar and .content and I want to set .sidebar to keep the same height with the .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.

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

Thank you!

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

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

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

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

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/

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

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

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

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

Answer 5

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

Answer 6

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

Answer 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(document).ready(function() { 
  sidebarHandler();
});