Make elements occupy the entire height?

Hola

I'm adapting the design of John to my liking.
Location: post page, archive page or similars.
The idea is: Main Column white background and black line on the right. Sidebar khaki background.
I have made the following changes:

Code: Select all

#gk-mainbody-columns { background:white; }
   #gk-mainbody-columns section { border-left:1px solid black; }
   #gk-mainbody-columns aside#gk-sidebar { background:khaki; }

The problem is: The height of section and aside#gk-sidebar are defined by their content.
I need to be both equally height.
How I can do to make these elements occupy the entire height with CSS?

Gracias.

Hi,
You can add min-height property:

Code: Select all


#gk-mainbody-columns > aside,
#gk-mainbody-columns > section {
   min-height: 1600px;
}


but it's not exactly good idea, because you may have different height in your mainbody (post content).
The only way is to use JS/jquery and compare containers height - the container with bigger height value should be added to the second container.
http://www.cssnewbie.com/equal-height-c ... VJp50MANAA
http://codepen.io/micahgodbolt/pen/FgqLc

I already imagined, so I made this with jQuery:

Code: Select all

jQuery(document).on('ready',function(){ definirMidaSection(); });
jQuery(window).on('resize',definirMidaSection);
function definirMidaSection(){
   if ( matchMedia('screen and (max-width:820px)').matches) {
      jQuery('#gk-mainbody-columns > section').css({'min-height':'0px'});
   } else {
      jQuery('#gk-mainbody-columns > section').css({'min-height':(jQuery('#gk-mainbody-columns').height())+'px'});
   }
};

My level of jQuery isn't very high, so I don't know if there will be a better choice.

If it works properly and you don't have any error in your javascript console, the solution is good.

No, no errors in the javascript console.
But I don't like this solution because it prints inline styles and that's not good for SEO.

Unfortunately I'm not sure if there's any other solution, because in this case css must be generated dynamically.