Inherit ‘Height’ of child element from the parent with Jquery

Good day!

Here we code again, some client from the US wants a very responsive WordPress theme for his business website. Difinetly, every responsive templates gains more visitors, site rank and site incomes.

Today, we’ll gonna be working for <div> child element responsive heights that will inherit the parent elements wether its <div> or something else.

The given height of this parent <div> element is exactly 93px that has 2 responsive columns inside, the title and the breadcrumbs. Photo shown below.

The title of the page was assigned as <h2> that inherits the height of the container. However, this breadcrumbs – which has 60px of height – doesn’t look good to the client, he wanted the texts should be in the middle or ‘vertically aligned.’

JQuery

Now, we were going to take the outerHeight of the class “.wrap-breadcrumb .container” as our main source to be variabled to the child element.

I have attached a photo that shows a simple JQuery variable code for the child element, indicated its class as “.wrap-breadcrumb .vc_align_right” that takes the same height with the parent element.

You will only encounter sometimes an error about “unexpected $ or Jquery,” but you have to choose whether using jQuery format or ‘$’. To handle the error, use code below: