rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #7769 from holic/3.0.0-sticky-footer

Browse Source 
Use padding instead of #push with box-sizing: border-box
This commit is contained in:
Mark Otto 2013-05-03 14:29:11 -07:00
commit 1bce9b295d
2 changed files with 4 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
sticky-footer-navbar.html
View File

@ -22,14 +22,13 @@ title: Sticky footer with navbar template
height: 100%; height: 100%;
/* Negative indent footer by its height */ /* Negative indent footer by its height */
margin: 0 auto -60px; margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
} }
/* Set the fixed height of the footer here */ /* Set the fixed height of the footer here */
#push,
#footer { #footer {
height: 60px; height: 60px;
}
#footer {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
@ -106,8 +105,6 @@ title: Sticky footer with navbar template
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div> </div>
<div id="push"></div>
</div> </div>
<div id="footer"> <div id="footer">

7
sticky-footer.html
View File

@ -22,14 +22,13 @@ title: Sticky footer template
height: 100%; height: 100%;
/* Negative indent footer by its height */ /* Negative indent footer by its height */
margin: 0 auto -60px; margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
} }
/* Set the fixed height of the footer here */ /* Set the fixed height of the footer here */
#push,
#footer { #footer {
height: 60px; height: 60px;
}
#footer {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
@ -71,8 +70,6 @@ title: Sticky footer template
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div> </div>
<div id="push"></div>
</div> </div>
<div id="footer"> <div id="footer">