Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Body Height to 100%


  #1  
Old May 14, 2009, 08:07 AM
monardo
 
10 posts · Feb 2009
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!

  #2  
Old May 14, 2009, 09:32 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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'});
}
  #3  
Old May 14, 2009, 10:07 AM
monardo
 
10 posts · Feb 2009
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!
  #4  
Old May 14, 2009, 10:17 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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'});
}
  #5  
Old May 14, 2009, 10:35 AM
monardo
 
10 posts · Feb 2009
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.

  #6  
Old May 14, 2009, 05:33 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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"});
}
  #7  
Old May 15, 2009, 02:22 AM
monardo
 
10 posts · Feb 2009
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>
  #8  
Old May 15, 2009, 05:52 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
You keep removing the last

});

Don't remove anything, just add the code I posted above
  #9  
Old May 15, 2009, 07:22 AM
monardo
 
10 posts · Feb 2009
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!
  #10  
Old Jul 12, 2009, 10:29 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #11  
Old Sep 9, 2009, 07:44 AM
Walt
 
20 posts · Sep 2009
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.
  #12  
Old Sep 15, 2009, 04:58 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Do you have Atahualpa Theme Options -> "Style and Edit Footer" -> Sticky Footer on short pages?
  #13  
Old Sep 26, 2009, 11:18 AM
Walt
 
20 posts · Sep 2009
I think that was the only option in Atahaulpa 3.4.2 that I haven't messed with. It worked perfectly.

Bookmarks

Tags
100%, body, height

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to increase the height of Page Menu? onlinebisnes Header configuration & styling 5 Oct 7, 2010 03:18 PM
Image too small at 770 px for Atahualpa theme - any way to make it stretch to 100%? houston777 Header configuration & styling 1 Jul 5, 2009 04:25 PM
Margin Height for whole theme idg Header configuration & styling 2 Apr 22, 2009 07:30 PM
text and picture on same height mowcow Excerpts, Read more, Pagination 0 Mar 16, 2009 12:22 PM
Change height to Atahulpa theme wordpresser Header configuration & styling 1 Mar 6, 2009 12:32 PM


All times are GMT -6. The time now is 03:49 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.