-
May 8th, 2012, 02:24 AM
#1
make footer stay on bottom if content does not fill screen.
Note.Using this on master page.
Ok.After trying for hours i cannot get it to work.
I need the footer to stay on the bottom of the screen.This is exactly what i want but i does not work(footer stays where content ends)
http://www.cssreset.com/2010/css-tut...page-with-css/
My page structure is this:
Code:
html,body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
font-size: small;
margin: 0;
padding: 0;
color: #000;
background-image:url("master_images/backgroundmaster.jpg");
background-attachment:fixed;
background-repeat:repeat;
height:100%;
width:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
.mefoo
{
background-image:url("master_images/footerleftright.jpg");
background-repeat:repeat;
background-position:center bottom;
height:16px;
position:absolute;
width:100%;
/* margin:0; */
z-index:1006;
bottom:0;
left:0;
}
.footer {
/* padding: 0px 0; */
position:relative;/* this gives IE6 hasLayout to properly clear */
clear: both; contain them */
height:16px;
background-image:url("master_images/footer.jpg");
background-repeat:no-repeat;
/* background-position:center bottom; */
z-index:3;
width:1020px;
margin: 0 auto 0 auto;
text-align: left;
}
<div id="wrapper">
<div this is the header/>
<div this is the content/>
<div class="mefoo">
<div class="footer" id="foo" runat="server">
<!-- end .footer --></div>
</div>
</div>
Thanks.
Last edited by sapator; May 8th, 2012 at 02:27 AM.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
May 8th, 2012, 05:49 AM
#2
Re: make footer stay on bottom if content does not fill screen.
The page you linked to contains the following:
The content <div> has a large amount of bottom padding, equal to or greater than the height of the footer, which stretches the wrapper <div>. Other than that, there is nothing unusual about the ‘content’ – fill it with whatever you like. Ditto the ‘header’.
Although it may be the case it isn't clear from the code you posted that you have implemented this.
An easier solution may be to start with the demo code provided on that site and slot your bits in 1 and time testing as you go.
-
May 8th, 2012, 07:43 PM
#3
Re: make footer stay on bottom if content does not fill screen.
Yep.All done nothing works.The demo is for head,content,footer strictly .I have head,content(1000 stuff in there hence somewhere this conflicts and do nothing) and double footer but no matter i remove the extra div and still does not work.
I don't think this were meant to work for something more complex.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
May 8th, 2012, 08:02 PM
#4
Re: make footer stay on bottom if content does not fill screen.
probably does not work because the contentplaceholder included in the content-container is sized on the content page and not on the master page.I haven't found any article that will help solve that one.I believe half of the css must be used on the master page and half on the content page.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|