Refael
asked on
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?
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?
https://www.experts-exchange.com/questions/28345437/Bootstrap-3-one-true-height-approach.html?anchorAnswerId=39803422#a39803422
ASKER
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).
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).
Got a link to the page?
ASKER
Not yet its in local development
basically here is how it goes:
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>
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);
})
ASKER
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.
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>
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
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);
})
ASKER
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.
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.
ASKER
Sorry, here is the screenshot
sc.gif
sc.gif
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.