• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 310
  • Last Modified:

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?
0
Refael
Asked:
Refael
  • 6
  • 5
1 Solution
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now