height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
+ /* Pad bottom by footer height */
+ padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
- #push,
#footer {
height: 60px;
- }
- #footer {
background-color: #f5f5f5;
}
<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>
</div>
-
- <div id="push"></div>
</div>
<div id="footer">
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
+ /* Pad bottom by footer height */
+ padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
- #push,
#footer {
height: 60px;
- }
- #footer {
background-color: #f5f5f5;
}
<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>
</div>
-
- <div id="push"></div>
</div>
<div id="footer">