github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Docs for sticky footer.

Browse Source
This commit is contained in:
Chris Eppstein 2010-04-24 16:58:50 -07:00
parent fe30041946
commit 0661f8e305
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/content/reference/compass/layout.haml
View File

@ -13,4 +13,4 @@ classnames:
- render 'reference' do - render 'reference' do
%p %p
This module provides tools to help you with page layout. This module provides tools to help you with page layout.
So far, it's just the stick-footer mixin. So far, it's just the <code>sticky-footer</code> mixin.

23
doc-src/content/reference/compass/layout/sticky_footer.haml
View File

@ -10,6 +10,27 @@ classnames:
- layout - layout
--- ---
- render 'reference' do - render 'reference' do
%p :markdown
This module provides tools needed to lay out your footer such This module provides tools needed to lay out your footer such
that it sticks to the bottom of the page. that it sticks to the bottom of the page.
Mix in to the top level of your stylesheet, so the footer stays
at the bottom of the screen. This mixin relies on the following
HTML structure, and a fixed-height `#footer` element:
<body>
<div id="root">
<div id="root_footer"></div>
</div>
<div id="footer">
Footer content goes here.
</div>
</body>
If you use the default selectors, this mixin is simple to use:
@include sticky-footer(54px)
You can define the selectors yourself too:
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")