Body Height to 100%
Hi you all,
I am trying to get the body (all the contents) to be always 100% in height. That is to avoid what you can see in the attachment. I guess this is not a very big deal but I can't seem to get it done! Thanks a lot! http://www.fgplus.com/atahualpa/atahualpa01.jpg |
Add to the existing jQuery code in header.php, i.e. after
jQuery("ul.tw-nav-list").addClass("clearfix"); this: var windowheight = jQuery('window').height(); var layoutheight = jQuery('div#wrapper').height(); if ( windowheight > layoutheight ) { jQuery('table#layout').css({height: windowheight + 'px'}); } if you have padding, margin, borders around table#layout you may have to adjust the actual height being set for table#layout, i.e. var windowheight = jQuery('window').height(); var layoutheight = jQuery('div#wrapper').height(); if ( windowheight > layoutheight ) { var targetheight = layoutheight - 30; /* div#wrapper - 2*15px for padding around table#layout */ jQuery('table#layout').css({height: targetheight + 'px'}); } |
Hi Flynn,
Thanks a lot for the quick response. Unfortunatelly it didn't work... Now, since I am not a programmer, I am never sure about what I do when it comes to coding! So here goes the bit of header.php that I changed, just for you to check if it is ok: jQuery("ul.tw-nav-list").addClass("clearfix"); var windowheight = jQuery('window').height(); var layoutheight = jQuery('div#wrapper').height(); if ( windowheight > layoutheight ) { jQuery('table#layout').css({height: windowheight + 'px'}); }); //--> I checked and erased anything related with padding, margins and borders around table#layout. In any case I also tried the second version of your code with no success either. Any other idea? Thanks! |
The closing bracket is missing
var windowheight = jQuery('window').height(); var layoutheight = jQuery('div#wrapper').height(); if ( windowheight > layoutheight ) { jQuery('table#layout').css({height: windowheight + 'px'}); } |
Sorry Flynn, but still nothing changed...
Here is what I tried: jQuery("ul.tw-nav-list").addClass("clearfix"); var windowheight = jQuery('window').height(); var layoutheight = jQuery('div#wrapper').height(); if ( windowheight > layoutheight ) { jQuery('table#layout').css({height: windowheight + 'px'}); } //--> </script> <?php wp_h.... and jQuery("ul.tw-nav-list").addClass("clearfix"); var windowheight = jQuery('window').height(); var layoutheight = jQuery('div#wrapper').height(); if ( windowheight > layoutheight ) { jQuery('table#layout').css({height: windowheight + 'px'}); } }); //--> </script> <?php wp_h.... Just in case I wasn't able to explain myself, I just uploaded an image... what you see on the left is how I see it now online... and what you see on the right is how I'd like it to be. http://www.fgplus.com/atahualpa/atahualpa01.jpg |
Try this, works for me:
// strech short pages to full height, keep footer at bottom var windowheight = jQuery(window).height(); var headerheight = jQuery("td#header").height(); var footerheight = jQuery("td#footer").height(); var layoutheight = jQuery("div#wrapper").height(); if ( windowheight > layoutheight ) { var newmiddleheight = windowheight - headerheight - footerheight - 43; jQuery("td#middle").css({height: newmiddleheight + "px"}); } |
Hi FLynn,
At this point I am starting to feel dumb, but... still couldn't make it work. I am sending you the code you sent me, with the previous and following lines, just for you to see where I am inserting it... jQuery("ul.tw-nav-list").addClass("clearfix"); // strech short pages to full height, keep footer at bottom var windowheight = jQuery(window).height(); var headerheight = jQuery("td#header").height(); var footerheight = jQuery("td#footer").height(); var layoutheight = jQuery("div#wrapper").height(); if ( windowheight > layoutheight ) { var newmiddleheight = windowheight - headerheight - footerheight - 43; jQuery("td#middle").css({height: newmiddleheight + "px"}); } //--> </script> |
You keep removing the last
}); Don't remove anything, just add the code I posted above |
Sorry about that!
I did it as you said now and it seems to work fine in Firefox, but: - it creates a vertical scrollbar in Safari - it doesn't work in Opera Everything in Mac. If you want to check it out you can visit www.in-spire.biz/site/ Cheers! |
See http://forum.bytesforall.com/showthr...0042#post10042 for a new version, tested in FF 2/3, IE 6/7, Safari, Opera
This will also be a theme option in 3.4.2 |
v. Atahualpa 3.4.2
It appears that this didn't make it into the latest version. How can I set a minimum height for all the entire theme? Great theme, thanks. |
Do you have Atahualpa Theme Options -> "Style and Edit Footer" -> Sticky Footer on short pages?
|
I think that was the only option in Atahaulpa 3.4.2 that I haven't messed with. It worked perfectly.
|
All times are GMT -6. The time now is 08:58 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.