Response title
This is preview!
adjust height of div after ajax loaded site
in Using jQuery
•
10 years ago
Hello,
I am getting nervous on this little problem here. I hope someone can help me out!
I have the following structure on my website:
- <div id="nav"></div>
- <div id="wrapper-img">
- <div id="wrapper">
- <div id="header"></div>
- <div id="content"></div>
- </div>
- </div>
- <div id="footer"></div>
What I want to do is the following:
- Load site with ajax and fill it into the content = already working
- Due to the change of the content area, I want to adjust height of the whole wrapper-img.
- If the content is smaller than the viewport, the height of the wrapper-img should be reduced to fit the users viewport (so you can see the footer below the content).
- If the content is lager than the viewport, the height of the wrapper-img should be expanded to fit to the content.
This is my idea how it should work:
- var viewportHeight = $(window).height();
- var navHeight = $('div#nav').height();
- var headerHeight = $('div#header').height();
- var contentHeight = $('div#content').height();
- var footerHeight = $('div#footer').height();
- var setHeight;
- if ((navHeight + headerHeight + contentHeight + footerHeight) <= viewportHeight) {
- setHeight = viewportHeight - navHeight - headerHeight - footerHeight;
- } else {
- setHeight = navHeight + headerHeight + contentHeight + footerHeight;
- }
- // set height
- $('div#content').css('height', setHeight);
Unfortunately it does not work for long sites and I don't know why. Smaller sites are being reduced as wished, but on long sites there are always around 200px missing.
Thx in advance for your help!
p4trick
1