100% Height Layout « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Newscast

100% Height Layout

6 posts from 2 voices

Started 2 years ago by n141
Latest reply from James Morrison
This topic is closed
This topic is resolved

Tags:

n141
Member

Hi,

I'd like to know if this is possible to have a 100% height layout using css.
I'd like to have the footer fixed at the bottom of the page (screen) when there's not enough content in a post/page.

I tried :

html, body {
height: 100%;
margin: 0;
}

#global {
min-height:100%;
}

where div#global is placed like this in header.php and footer.php

header.php
----------------
<body id='top' <?php body_class($k_body_class);?>>
<div id="global">
....

footer.php
----------------
...
</div> 
</body>

But it doesn't really seem to work and I can't figure how to do that...

Is there a way to do this ?

Best regards

PS: thank you for this amazing theme !

Posted 2 years ago #
James Morrison
Former Team Member
I'd suggest taking out the height / min-height values you added and use something like this:
```
#footerwrap {
position: fixed;
bottom: 0;
}
```
I would suggest having a smaller footer area than the demo though or most of the page will be the footer!
Posted 2 years ago #
n141
Member

Thanks James for your answer !
Unfortunately, your proposition is not what i need.
With this solution, the footer is always 'fixed' at the bottom of the scrren even if the content is important; in that case the rest of the content of the page appears under the footer.
What i would like to do is to fix the footer at the bottom of the screen ONLY for pages which have not enough content to fill the screen.
For others cases, pages which have enough content to fill the screen, the footer should appear after the content just as usual.

I know there's a way to do this, but which way... ? :)

Got an idea ?

Posted 2 years ago #
James Morrison
Former Team Member

Ok, I misunderstood what you needed.

What you need is jQuery to work out what the height of the page is and add a class to fix the footer to the bottom of the page. I'm not good enough with jQuery to put this together for you, I tend to ask my jQuery questions over at http://stackoverflow.com so if you can't do it yourself give them a try.

Posted 2 years ago #
n141
Member

Ok, thanks James !
I'll try with jQuery although i'm not very familiar with this library...
Wish me luck :)

Posted 2 years ago #
James Morrison
Former Team Member

Hey!

Good luck :)

Best regards,
James

Posted 2 years ago #