Posted by Bilibul on May 12, 2011 at 9:01pm
7 followers
Jump to:
| Project: | Zen |
| Version: | 7.x-3.1 |
| Component: | layout.css |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
| Issue tags: | bottom, footer, sticky footer |
Issue Summary
Hi all,
I would like to be sure I am not fully crazy. I am trying to do quiet simple I manage to do for some other CSS based themes: stick the footer at the bottom of the page, even if only a short content is displayed.
Using Zen, I assume the page layout is, in short, like this :
<div id="page-wrapper">
<div id="page">
<div id="header"></div>
<div id="main-wrapper"></div>
<div class="region region-footer"></div>
</div>
</div>So, I edited layout-fixed in order to obtain:
html, body {
margin:0;
padding:0;
height:100%;
}
#page-wrapper {
min-height: 100%;
position: relative;
}
#page {
min-height: 100%;
position: relative;
}
#main-wrapper {
position: relative; /* the first 3 lines are for current presentation, no relation with sticky footer */
padding-right:20px;
padding-left:20px;
margin-bottom:120px; /* The height of my footer is 120px; */
}
.region-footer {
position: absolute;
width: 980px;
margin-top: -120px;
height: 120px;
}This absolutely does not work. For some reason (I would like to know) #page-wrapper and #page remains "small" sized. I mean the min-height:100% seems not to be taken into account.
If you could help me, it would be so much appreciated.
Thanks.
Comments
#1
Are you talking about a technique similar to http://www.cssstickyfooter.com/ and http://drupal.org/node/491478 ?
#2
Having the same problem and spent hours trying various solutions such as mentioned in http://drupal.org/node/491478. I probably tried every variant mentioned there but I simply cannot get it to work.
An example of where the footer is now can be seen here: http://yiddish-sources.com/ehps-new/?q=content/presse-lyonnaise-du-xixe-siècle.
Using CSS like
HTML, BODY, #page-wrapper, #page { height: 100%; }
#main-wrapper { min-height: 100%; }
I can manage to get it done somewhat but never sticking. I think that my knowledge of page.tpl.php and css is not enough to understand where the problem could be. Any help would be much appreciated.
Best,
Gerben
#3
I've come across this post looking for information on how to achieve the same, using 6.x-2.1 though.
Here's the css styles that made the trick for me. I hope it is of some use:
html, body {height: 100%;
}
#page-wrapper {
min-height: 100%;
}
#page {
overflow: auto;
padding-bottom: 20px;
}
#footer {
clear: both;
height: 200px;
position: relative;
}
#4
I was able to successfully implement a sticky footer with Zen 7.x-3.1 using the method authored by Ryan Fait at http://ryanfait.com
Note that I am using the page bottom region (i.e., $page['bottom']) as the region to place blocks within my sticky footer. So, you'll see me rendering $page['bottom'] within the tag with the "footer" class.
I change html.tpl.php to reflect the following, starting at the body tag:
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div class="wrapper"> <!-- Sticky Footer 1 of 4 -->
<div id="skip-link">
<a href="#<?php print $jump_link_target; ?>" class="element-invisible element-focusable"><?php print t('Jump to Navigation'); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
</div><!-- Sticky Footer 4 of 4 -->
<?php print $page_bottom; ?>
</body>
</html>
And I changed page.tpl.php to reflect the following, staring with the sidebar_first region render:
<?php print render($page['sidebar_first']); ?>
<?php print render($page['sidebar_second']); ?>
</div></div><!-- /#main, /#main-wrapper -->
<?php print render($page['footer']); ?>
</div></div><!-- /#page, /#page-wrapper -->
<div class="push"></div></div> <!-- Sticky Footer 2 of 4 -->
<div class="footer"> <!-- Sticky Footer 3 of 4 -->
<?php print render($page['bottom']); ?>
</div><!-- Sticky Footer 4 of 4 -->
Finally, here's my CSS:
* {margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -260px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 260px; /* .push must be the same height as .footer */
clear: both;
}
#5
Automatically closed -- issue fixed for 2 weeks with no activity.