Footer positioning: Difference between revisions
From MoodleDocs
Helen Foster (talk | contribs) m (template move) |
Frank Ralf (talk | contribs) (coloring the code) |
||
| Line 2: | Line 2: | ||
In ''footer.html'', the footer div is normally contained inside the page div e.g. ''moodle/theme/standardblue/footer.html'' | In ''footer.html'', the footer div is normally contained inside the page div e.g. ''moodle/theme/standardblue/footer.html'' | ||
< | |||
<code php> | |||
</div> <!-- end div content --> | |||
<div id="footer"> | <div id="footer"> | ||
<hr size="1" noshade="noshade" /> | <hr size="1" noshade="noshade" /> | ||
| Line 11: | Line 13: | ||
</div> <!-- end div page --> | </div> <!-- end div page --> | ||
</body> | </body> | ||
</html></ | </html> | ||
</code> | |||
Change this so the footer div appears after the page div | Change this so the footer div appears after the page div | ||
< | |||
<code php> | |||
</div> <!-- end div content --> | |||
</div> <!-- end div page --> | </div> <!-- end div page --> | ||
| Line 45: | Line 51: | ||
} | } | ||
</ | </code> | ||
This creates a div that should always at least fill the height of the browser viewport, regardless of the amount of page content. The footer is positioned underneath this div and nudged up using a negative top margin. We also need to allow some extra space underneath the content so that when the footer gets repositioned it doesn't overlap anything. 105 pixels of padding are added to the bottom of the content div to make a space for the footer, then the footer is moved up from its current position by 100 pixels. | This creates a div that should always at least fill the height of the browser viewport, regardless of the amount of page content. The footer is positioned underneath this div and nudged up using a negative top margin. We also need to allow some extra space underneath the content so that when the footer gets repositioned it doesn't overlap anything. 105 pixels of padding are added to the bottom of the content div to make a space for the footer, then the footer is moved up from its current position by 100 pixels. | ||
Revision as of 18:08, 12 May 2010
In footer.html, the footer div is normally contained inside the page div e.g. moodle/theme/standardblue/footer.html
</body>
</html>
Change this so the footer div appears after the page div
</body>
</html>
Then in the layout CSS file add the following
html, body { margin: 0; padding: 0; height: 100%; } #page { margin: 0; padding: 0; min-height: 100%; _height: 100%; /* min-height for smart browsers _height for Internet Explorer ;-)*/ } #content { padding-bottom: 105px; } #footer { margin: -100px 0 0 0; padding: 0 0 10px 0; /* assuming footer of height 100px */ }This creates a div that should always at least fill the height of the browser viewport, regardless of the amount of page content. The footer is positioned underneath this div and nudged up using a negative top margin. We also need to allow some extra space underneath the content so that when the footer gets repositioned it doesn't overlap anything. 105 pixels of padding are added to the bottom of the content div to make a space for the footer, then the footer is moved up from its current position by 100 pixels.References
* footerStickAlt: A more robust method of positioning a footer
