jQuery container hight of dynamic content

Hello Experts,

I am using jQuery to determine the height of a page sidebar and then to set a minimum-height for the content-container div according to the sidebar height.

The problem i believe is with the fact that the content of the sidebar is dynamic (it contain few widgets - Wordpress). So the height of the sidebar is not the actual height of its entire content.

How is it possible to solve this?
RefaelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RefaelAuthor Commented:
Hi Gray, Thanks,

This script you referred me to did not extend the content div to the eight of the sidebar. For some very strange reason it moved the footer to the end of the content div where before it was below the highest column (e.g. content div or the sidebar).
0
GaryCommented:
Got a link to the page?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RefaelAuthor Commented:
Not yet its in local development

basically here is how it goes:

<div class="container" id="page">
     <div class="row">
         
          <div class="col-md-9">
          [b]This is the main content div[/b]
         </div>

        <div class="col-md-3 sidebar">
        [b]This is the sidebar div[/b]
        </div>
   
    </div> [b]end of row[/b]
   
   <div class="row">
       <footer>
     <div class="col-md-9">Footer text </div>
     <div class="col-md-3">Fotter logos </div>
      </footer>
  </div>

</div>

Open in new window

0
GaryCommented:
Then you need something like this

jQuery(function ($) {
    col1 = $("#page>div>div")
    col2 = $("#page>div>.sidebar")
    getmaxheight = Math.max(col1.height(), col2.height());

    col1.height(getmaxheight);
    col2.height(getmaxheight);
})

Open in new window

0
RefaelAuthor Commented:
I have tried it. It does not work.

I have classes to each div to ease the selection:

the .article (below) is the one i am trying to set the same height as the sidebar. The article have a white background color and that's why need it to be in the same height of the sidebar.

<div class="col-md-9">
   <article class="post-article"></article>
</div>

<div class="col-md-3 sidebar">
</div>

Open in new window

0
GaryCommented:
All you need to do is change the targetting, that code was based on your posted code.
If you don't post the real code then there is no point me giving an answer based on something that doesn't exist

jQuery(function ($) {
    col1 = $(".post-article")
    col2 = $(".sidebar")
    getmaxheight = Math.max(col1.height(), col2.height());

    col1.height(getmaxheight);
    col2.height(getmaxheight);
})

Open in new window

0
RefaelAuthor Commented:
Gray,

I did make the changes in your initial script to fit it to my classes and page script. Believe I have no intention waste anyone's time :-)

Look at the screenshot : As i said before this does not work. When i inspect the page elements in chrome i see this:

"<article class="post-article" style="height: 1008px;">"
"<div class="col-md-3 sidebar" style="height: 948px;">"

Yet, the content div gets to about 90% of the sidebar height.
0
RefaelAuthor Commented:
Sorry, here is the screenshot
sc.gif
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
Thank you Gary,
I will check my scripts.
I have the feeling it might be padding or margins issues that causes the main content div to get to about 90% of the sidebar height.
I will let you know. But you did see the screenshot and the result of the style i am getting.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.