CODEWITHSUNDEEP
htmlcssheight
nowiko
nowiko

Reputation: 2567

Make two blocks identical height automatically

I have two blocks first is the block where I will display my posts, second is the sidebar, what has only background. I want to make sidebar hight equalt to the content bar, e.g I assign it by static way in Css:

#sidebar {
    heght: 565px;
}

, but what if I will want to output higther count if posts, can I make height of the sidebar to somehow rely on content bar height? Thanks!

It may be duplicate from here, but approach described in answer does not help for me.

Upvotes: 0

Views: 69

Answers (3)

Blank
Blank

Reputation: 540

When you use a specific height on content, and height:100%; on the sidebar, the sidebar will go along with the content whenever you change the content.

JsFiddle

Upvotes: 2

user4759415
user4759415

Reputation:

I tackled something similar to this and whipped up a jQuery solution to it that you might want to try, it's been working great for me.

Basically the function gets the height of your main content and your sidebar. If the main content is larger than the sidebar then it sets the height of the sidebar to the height of the main content.

$(document).ready(function () {
   var postheight = $("#yourmaincontent").height();
   var opinfoheight = $("#yoursidebar").height();
   if (postheight >= opinfoheight) {    
       $("#yoursidebar").css("height",""+ postheight +"px");
    }
   else {       
   }
 });

There may be a way to do it in pure CSS but I didn't find one.

Upvotes: 1

Zealot
Zealot

Reputation: 697

One way would be to use the table display solution mentioned in the link you posted, but you can also go for the flexbox approach, it's a CSS3 property already supported by almost 93% of browsers (you can use a JS fallback if you want).

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container_item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

More details about this solution

A complete guide about flexbox

Upvotes: 0

Related Questions