Live
<div class="g-container"> <div class="g-real-box"> <p>Sticky Footer</p> </div> <div class="g-footer"></div></div>
Live
x
.g-container { height: 100vh; display: flex; flex-direction: column;}.g-footer { margin-top: auto; flex-shrink: 0; height: 30px; background: deeppink;}p { line-height: 200px; text-align: center;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.