Skip to content

Compass Core: Layout Module

Jump to bottom Edit New page
mrajcok edited this page Sep 13, 2010 · 5 revisions

The Layout Module provides helpers for general layout solutions that aren’t specifically provided by one of the framework modules. Include the layout module with:

@import compass/layout.sass

The layout module does not generate any CSS, it only provides mixins.

Sticky Footer

This will pin your layout’s footer to the bottom of the screen when page content is too short. The footer will scroll normally when the page content fills the height of the window.

Requirements:

  • A fixed footer height (px)
  • A container element for the page content, with a “clearing element” as its last child.
  • A footer element as a direct child of <body>.

Usage:

Mix into the top level:

+sticky-footer( 180px, "#root", "#root_footer", "#footer" )

You can specify the selectors for the three required elements. The default selectors are as shown above, but they can be changed using the last three optional parameters. The height is the only required parameter.

The markup follows this structure:

body
  #root
    #header
    Page content goes here.
    #root_footer
  #footer
    Footer content goes here.
Add a custom footer
Add a custom sidebar
Clone this wiki locally