Added +sticky-footer mixin
Forces page layout to expand, pinning the footer to the bottom edge of the browser window. Refer to: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
This commit is contained in:
parent
b9d2f78a82
commit
208d0b1f04
4
Manifest
4
Manifest
@ -38,8 +38,10 @@ examples/blueprint_semantic/stylesheets/liquid.sass
|
|||||||
examples/blueprint_semantic/stylesheets/print.sass
|
examples/blueprint_semantic/stylesheets/print.sass
|
||||||
examples/blueprint_semantic/stylesheets/screen.sass
|
examples/blueprint_semantic/stylesheets/screen.sass
|
||||||
examples/compass/compass.html
|
examples/compass/compass.html
|
||||||
|
examples/compass/sticky_footer.html.haml
|
||||||
examples/compass/stylesheets/compass.sass
|
examples/compass/stylesheets/compass.sass
|
||||||
examples/compass/stylesheets/images/blue_arrow.gif
|
examples/compass/stylesheets/images/blue_arrow.gif
|
||||||
|
examples/compass/stylesheets/sticky_footer.sass
|
||||||
examples/compass/stylesheets/utilities.sass
|
examples/compass/stylesheets/utilities.sass
|
||||||
examples/compass/utilities.html.haml
|
examples/compass/utilities.html.haml
|
||||||
examples/yui/divisions.html.haml
|
examples/yui/divisions.html.haml
|
||||||
@ -70,8 +72,10 @@ frameworks/blueprint/templates/project/ie.sass
|
|||||||
frameworks/blueprint/templates/project/print.sass
|
frameworks/blueprint/templates/project/print.sass
|
||||||
frameworks/blueprint/templates/project/screen.sass
|
frameworks/blueprint/templates/project/screen.sass
|
||||||
frameworks/compass/stylesheets/_compass.sass
|
frameworks/compass/stylesheets/_compass.sass
|
||||||
|
frameworks/compass/stylesheets/compass/_layout.sass
|
||||||
frameworks/compass/stylesheets/compass/_reset.sass
|
frameworks/compass/stylesheets/compass/_reset.sass
|
||||||
frameworks/compass/stylesheets/compass/_utilities.sass
|
frameworks/compass/stylesheets/compass/_utilities.sass
|
||||||
|
frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass
|
||||||
frameworks/compass/stylesheets/compass/utilities/_general.sass
|
frameworks/compass/stylesheets/compass/utilities/_general.sass
|
||||||
frameworks/compass/stylesheets/compass/utilities/_links.sass
|
frameworks/compass/stylesheets/compass/utilities/_links.sass
|
||||||
frameworks/compass/stylesheets/compass/utilities/_lists.sass
|
frameworks/compass/stylesheets/compass/utilities/_lists.sass
|
||||||
|
14
examples/compass/sticky_footer.html.haml
Normal file
14
examples/compass/sticky_footer.html.haml
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
!!! Transitional
|
||||||
|
%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
|
||||||
|
%head
|
||||||
|
%meta{'http-equiv' => "content-type", :content => "text/html;charset=UTF-8"}
|
||||||
|
%title Compass Sticky Footer Example
|
||||||
|
%link{:rel=>"stylesheet", :href=>"stylesheets/sticky_footer.css", :type=>"text/css", :media=>"screen, projection"}
|
||||||
|
%body
|
||||||
|
#layout
|
||||||
|
#header
|
||||||
|
%h1 Sticky Footer Example
|
||||||
|
This is the main content area.
|
||||||
|
#layout_footer
|
||||||
|
#footer
|
||||||
|
This is the footer area.
|
12
examples/compass/stylesheets/sticky_footer.sass
Normal file
12
examples/compass/stylesheets/sticky_footer.sass
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
@import compass/reset.sass
|
||||||
|
@import compass/layout.sass
|
||||||
|
|
||||||
|
+global-reset
|
||||||
|
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
|
||||||
|
|
||||||
|
#header
|
||||||
|
:background #999
|
||||||
|
:height 72px
|
||||||
|
|
||||||
|
#footer
|
||||||
|
:background #ccc
|
1
frameworks/compass/stylesheets/compass/_layout.sass
Normal file
1
frameworks/compass/stylesheets/compass/_layout.sass
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import layout/sticky_footer.sass
|
@ -0,0 +1,17 @@
|
|||||||
|
// Based on http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
|
||||||
|
// Mix into the top level.
|
||||||
|
// Footer element must be outside of root wrapper element.
|
||||||
|
// Footer must be a fixed height.
|
||||||
|
|
||||||
|
=sticky-footer(!footer_height, !root_selector = "#root", !root_footer_selector = "#root_footer", !footer_selector = "#footer")
|
||||||
|
html, body
|
||||||
|
:height 100%
|
||||||
|
#{!root_selector}
|
||||||
|
:min-height 100%
|
||||||
|
:margin-bottom= -!footer_height
|
||||||
|
#{!root_footer_selector}
|
||||||
|
:height= !footer_height
|
||||||
|
#{!footer_selector}
|
||||||
|
:clear both
|
||||||
|
:position relative
|
||||||
|
:height= !footer_height
|
Loading…
Reference in New Issue
Block a user