Skip to content

Instantly share code, notes, and snippets.

@mokagio

mokagio/sticky.css

Created February 26, 2012 20:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mokagio/1918937 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mokagio/1918937 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. EngineerGio revised this gist Feb 26, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions template.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,11 +23,11 @@
    Content
    </div>
    </div>
    </div>
    <!-- /proper-content -->
    </div><!-- /.proper-content -->

    <div class="push"></div>
    </div><!-- /wrapper -->

    </div><!-- /.wrapper -->

    <div class="footer-wrapper">
    <footer>That's the sticky footer</footer>
  2. EngineerGio revised this gist Feb 26, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions sticky.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,18 +7,18 @@ html, body, .container, .content {
    }

    .proper-content {
    padding-top: 40px;
    padding-top: 40px; /* >= navbar height */
    }

    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
    margin: 0 auto -50px; /* same as the footer */
    }

    .push {
    height: 50px;
    height: 50px; /* same as the footer */
    }
    .footer-wrapper {
    position: relative;
  3. EngineerGio created this gist Feb 26, 2012.
    26 changes: 26 additions & 0 deletions sticky.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    html, body, .container, .content {
    height: 100%;
    }

    .container, .content {
    position: relative;
    }

    .proper-content {
    padding-top: 40px;
    }

    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
    }

    .push {
    height: 50px;
    }
    .footer-wrapper {
    position: relative;
    height: 50px;
    }
    38 changes: 38 additions & 0 deletions template.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="sticky.css" />
    </head>

    <body>
    <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">
    <a class="brand" href="#">EngineerGio's Sticky Bootstrap</a>
    </div>
    </div>
    </div>
    <div class="container">
    <div class="content">

    <div class="wrapper">
    <div class="proper-content">
    <div class="row">
    <div class="span12">
    Content
    </div>
    </div>
    </div>
    <!-- /proper-content -->

    <div class="push"></div>
    </div><!-- /wrapper -->

    <div class="footer-wrapper">
    <footer>That's the sticky footer</footer>
    </div>
    </div>
    </div>
    </body>
    </html>