Difference between revisions of "Team:William and Mary/Footer 2"
(Created page with "<div class="demo"> <h1>CSS “Always on the bottom” Footer</h1> <p>This is to prevent the footer from overlapping the content above it, since it is being removed from t...") |
|||
| Line 1: | Line 1: | ||
| + | <style> | ||
| + | html { | ||
| + | height: 100%; | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | *, | ||
| + | *:before, | ||
| + | *:after { | ||
| + | box-sizing: inherit; | ||
| + | } | ||
| + | |||
| + | body { | ||
| + | position: relative; | ||
| + | margin: 0; | ||
| + | padding-bottom: 6rem; | ||
| + | min-height: 100%; | ||
| + | font-family: "Helvetica Neue", Arial, sans-serif; | ||
| + | } | ||
| + | |||
| + | .demo { | ||
| + | margin: 0 auto; | ||
| + | padding-top: 64px; | ||
| + | max-width: 640px; | ||
| + | width: 94%; | ||
| + | } | ||
| + | |||
| + | .demo h1 { | ||
| + | margin-top: 0; | ||
| + | } | ||
| + | |||
| + | /** | ||
| + | * Footer Styles | ||
| + | */ | ||
| + | |||
| + | .footer { | ||
| + | position: absolute; | ||
| + | right: 0; | ||
| + | bottom: 0; | ||
| + | left: 0; | ||
| + | padding: 1rem; | ||
| + | background-color: #efefef; | ||
| + | text-align: center; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | |||
<div class="demo"> | <div class="demo"> | ||
<h1>CSS “Always on the bottom” Footer</h1> | <h1>CSS “Always on the bottom” Footer</h1> | ||
Latest revision as of 18:32, 15 June 2017
<style> html {
height: 100%; box-sizing: border-box;
}
- ,
- before,
- after {
box-sizing: inherit;
}
body {
position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles */
.footer {
position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center;
} </style>
This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with position: absolute;.
