Footer positioning
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.
