{"id":567,"date":"2013-09-18T12:10:23","date_gmt":"2013-09-18T12:10:23","guid":{"rendered":"https:\/\/mohsinrasool.com\/?p=567"},"modified":"2013-09-18T12:10:23","modified_gmt":"2013-09-18T12:10:23","slug":"keep-height-of-second-div-column-same-as-first-div","status":"publish","type":"post","link":"https:\/\/mohsinrasool.com\/keep-height-of-second-div-column-same-as-first-div\/","title":{"rendered":"Keep Height of Second Div column same as First Div"},"content":{"rendered":"<p>Hi,<\/p>\n<p>In responsive web design, I often encounter this issue, and solve it with jQuery. However this time, it was little different took much time to get it right.. So i am posting here for future reference:<\/p>\n<pre>&lt;code&gt;\n\n&lt;script&gt;\njQuery(document).ready(function($){\nvar currentHeight = 0;\n\n$(window).load(function() {\ncurrentHeight = $('#slider').outerHeight();\n$('#slider-right').css({'height':currentHeight});\n});\n\n$(window).resize(function() {\ncurrentHeight = $('#slider').outerHeight();\n$('#slider-right').css({'height':currentHeight});\n$(window).trigger('resize');\n});\n\n});\n&lt;\/script&gt;\n&lt;\/code&gt;<\/pre>\n<p>I had two column layout, with responsive slider at the left, and a div in the right.<\/p>\n<p>As slider keeps changing its height, right div looked bad. So using above code, we can use Jquery which does:<\/p>\n<p>1. Take size of slider (on load as real property in css is not set, and you need to let the page rendered to get the rendered height)<\/p>\n<p>2. Now we have two functions, one changes the height of right div on first page load. And second does the same thing but on every time when window resizes&#8230; to keep the height same on every window resize\/reload.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi, In responsive web design, I often encounter this issue, and solve it with jQuery. However this time, it was little different took much time to get it right.. So i am posting here for future reference: &lt;code&gt; &lt;script&gt; jQuery(document).ready(function($){ var currentHeight = 0; $(window).load(function() { currentHeight = $(&#8216;#slider&#8217;).outerHeight(); $(&#8216;#slider-right&#8217;).css({&#8216;height&#8217;:currentHeight}); }); $(window).resize(function() { currentHeight = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[3,7,14,17],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pLoVR-99","_links":{"self":[{"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/posts\/567"}],"collection":[{"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/comments?post=567"}],"version-history":[{"count":0,"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/posts\/567\/revisions"}],"wp:attachment":[{"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/media?parent=567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/categories?post=567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mohsinrasool.com\/wp-json\/wp\/v2\/tags?post=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}