CSS Footer: Keep the Content at the Bottom of the Page

HTML
<div class="demo"> <h2>CSS Footer - Always on the bottom page, not fixed</h2> <p>Lemon drops donut powder soufflé powder tootsie roll dragée sugar plum. Apple pie gummies pie bear claw gummies apple pie icing. Danish lollipop muffin chocolate cake.</p> <p>Gingerbread candy soufflé cookie lemon drops. Sweet roll caramels chocolate bar dragée pastry. Sweet carrot cake sweet cake soufflé chocolate bar sweet donut caramels. Soufflé bear claw pastry sesame snaps candy canes oat cake toffee. Gummi bears jelly beans fruitcake. Apple pie sweet roll chupa chups cotton candy toffee caramels. Brownie gummies topping. Donut biscuit macaroon lollipop biscuit jelly beans chocolate cake gummi bears. Cookie jelly marshmallow caramels.</p> <p>Apple pie toffee pie donut cookie. Wafer biscuit dessert pudding chocolate cake soufflé topping. Ice cream cake chocolate cake biscuit gummi bears liquorice. Chupa chups apple pie caramels cotton candy chocolate. Wafer macaroon candy canes halvah chocolate bar liquorice.</p> <p>Marzipan chocolate cake tootsie roll gummies. Muffin croissant tart dessert powder pudding. Sugar plum oat cake pie chocolate tart chocolate bar pudding apple pie. Carrot cake cake powder topping ice cream. Chocolate biscuit apple pie topping. Liquorice pie ice cream sugar plum cupcake ice cream. Tart cookie cake fruitcake toffee jelly caramels biscuit. Biscuit gummies donut chocolate bar.</p> <p>Muffin cookie fruitcake sweet. Topping tiramisu muffin dessert muffin dessert pastry. Lemon drops croissant candy canes croissant. Candy cotton candy cupcake ice cream pastry. Candy cupcake tiramisu cotton candy. Oat cake caramels icing marshmallow sweet roll. Lemon drops croissant pastry cookie icing cake cotton candy lollipop biscuit.</p> <p>Croissant cheesecake marshmallow muffin soufflé. Sweet roll danish apple pie sweet. Danish tart lollipop lollipop sweet macaroon apple pie. Donut cake jelly beans muffin cupcake. Lemon drops pudding marzipan jelly sweet sweet tiramisu wafer. Bonbon cake cheesecake cookie powder cheesecake.</p> <p>Lemon drops donut powder soufflé powder tootsie roll dragée sugar plum. Apple pie gummies pie bear claw gummies apple pie icing. Danish lollipop muffin chocolate cake.</p> <p>Gingerbread candy soufflé cookie lemon drops. Sweet roll caramels chocolate bar dragée pastry. Sweet carrot cake sweet cake soufflé chocolate bar sweet donut caramels. Soufflé bear claw pastry sesame snaps candy canes oat cake toffee. Gummi bears jelly beans fruitcake. Apple pie sweet roll chupa chups cotton candy toffee caramels. Brownie gummies topping. Donut biscuit macaroon lollipop biscuit jelly beans chocolate cake gummi bears. Cookie jelly marshmallow caramels.</p> <p>Apple pie toffee pie donut cookie. Wafer biscuit dessert pudding chocolate cake soufflé topping. Ice cream cake chocolate cake biscuit gummi bears liquorice. Chupa chups apple pie caramels cotton candy chocolate. Wafer macaroon candy canes halvah chocolate bar liquorice.</p> <p>Marzipan chocolate cake tootsie roll gummies. Muffin croissant tart dessert powder pudding. Sugar plum oat cake pie chocolate tart chocolate bar pudding apple pie. Carrot cake cake powder topping ice cream. Chocolate biscuit apple pie topping. Liquorice pie ice cream sugar plum cupcake ice cream. Tart cookie cake fruitcake toffee jelly caramels biscuit. Biscuit gummies donut chocolate bar.</p> </div> <div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
CSS
html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 8rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 34px; max-width: 640px; width: 94%; } .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 2rem; background-color: #424b54; color: #ffffff; text-align: center; }
JAVASCRIPT
Expand for more options Login