Make height 100% minimum WordPress
- REFUNDED
<blockquote><em><strong>I've now fixed this myself</strong></em></blockquote>
I've been trying to work this out, but I keep coming up with problems.
I want the height of the Wordpress page to be a minimum of 100% of the screen including the header & footer.
I've managed to get it so that it is 100%, but if the page is longer than the screen size, the footer then appears over the text and the text then continues.
Just to clarify:
The footer will be at the very bottom on short posts, pages, etc, but if the post/page is longer than the viewable screen, then the footer will be pushed right down to the bottom of that text.
Answers (4)
Jonah Schulte answers:
Hi Joe,
Can you post a link to your site so I can take a look at your code and find a proper solution?
Thanks,
Jonah
Joe Jenkins comments:
I seem to have got this working in Firefox/Chrome now (I think), but IE doesn't do a thing, not even the colour-coding as below. So now it is a case of just seeing why that isn't doing it.
This is the URL:
http://blank.wp3.co
Right now, it is colour coded to show me where each bit is showing up.
Yellow: Nav (which is the whole header)
Grey: The Backer element, which is the full 100% width
red: footer
white: column structures, which is where all the post/page info is going
I've included the CSS as an attachment.
Joe Jenkins comments:
I don't see the attachment showing on here, so here is the main code I think is important from the style.css file:
/* ================================================================
THEME SETUP
=================================================================== */
html, body {
background: #7f81ff url(images/bg/rotate.php);
height: 100%;
color: #000000;
font-size: 12px;
font-family: Verdana;
margin: 0px;
}
#backer {
width: 993px;
min-height: 100%;
background: #777;
margin: 0px auto 0px;
position: relative;
}
#wrapper {
background: #000;
width: 992px;
padding: 0px 0px 0px 0px;
}
/* ================================================================
HEADER
=================================================================== */
#header {
background: yellow;
width: 993px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
overflow: visible;
}
/* ================================================================
FOOTER SETTINGS
=================================================================== */
#footer {
width: 993px;
background: red;
text-align: center;
float: bottom-center;
position: absolute; bottom: 0;
clear: both;
}
/* ================================================================
MENUS
=================================================================== */
.nav {
background: yellow;
width: 973px;
font-size: 17px;
font-weight: bold;
font-family: arial, san-serif;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 4px 10px 0px 10px;
list-style-type: none;
list-style-image: none;
}
.nav ul {
background: yellow;
list-style-type: none;
list-style-image: none;
margin: 0px;
padding: 0px;
}
.nav li {
background: yellow;
float: left;
color: #fff;
list-style: none;
display: inline;
margin: 0px 0px 0px 0px;
padding: 7px 10px 0px 5px;
}
.current-cat a, .current-cat a:hover {
background: #ad1717 !important;
color: #ad1717!important;
}
.rssorange a, .rssorange a:hover {
background: #ad1717 !important;
color: #ff3400 !important;
}
/* ================================================================
COLUMN STRUCTURES
=================================================================== */
#column-setup {
background: #fff;
width: 993px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
overflow: hidden;
float: left;
}
.column-left {
width: 733px;
text-align: left;
line-height: 16px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}
.column-right {
width: 250px;
text-align: left;
line-height: 16px;
margin: 0px 5px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}
enodekciw answers:
This is common mark-up problem. It has nothing to do with WP, actually ;)
Follow [[LINK href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page"]]this tutorial[[/LINK]], to get footer stick to bottom of the page.
Joe Jenkins comments:
I've tried various sites, including that one but get nowhere.
Maor Barazany answers:
It is actually not a WP question, but a markup and html/css one.
Anyway, seeing your code may help to help you.
Another tutorial you can follow is this [[LINK href="http://www.cssstickyfooter.com/using-sticky-footer-code.html"]]sticky footer code[[/LINK]], should support cross browsers as well.
Joe Jenkins comments:
I've tried various sites, and that site I spent a few hours with, but no joy.
idt answers:
Hi Joe,
<blockquote>
The footer will be at the very bottom on short posts, pages, etc, but if the post/page is longer than the viewable screen, then the footer will be pushed right down to the bottom of that text.
</blockquote>
Looking at your page it seems to be doing just what you've stated above.
Do you want the footer to remain where it is even for pages with very long post?
Joe Jenkins comments:
It seems I spent months working on this, then as soon as I put the question on here, I figure it out :o/