Default Template

Default Template footer bottom in page

by Andrew Maestro

HTML

<div id="page">
    <header>
        <div class="holder">123</div>
    </header>
    <section>
        <div class="holder">Lorem ipsum dolor sit amet, mi nonummy sapien elit ipsum, sit ut, arcu sem, at donec vestibulum suspendisse donec magna. Proin mollis pede non, eget vel praesent enim ullamcorper ut, eleifend sapien proin labore ullamcorper, ipsum nulla ultrices, id imperdiet tortor id risus tincidunt luctus. Urna sit adipiscing, aliquam at, porttitor vestibulum aliquam, ultricies nibh arcu vitae sodales aptent, tincidunt nulla neque sed qui. Non rutrum arcu, rutrum montes est neque quis, venenatis non metus porttitor metus, in arcu sagittis pharetra hendrerit, deleniti nulla venenatis pede nibh pellentesque molestie. Sit placerat tristique rutrum feugiat, fusce dolor, ullamcorper phasellus dapibus malesuada in, elit sit lorem id condimentum pretium, non placerat eget dictumst. Sem dolor eros enim rhoncus leo habitant, mollis eros montes et mauris, sit eget nisl ut cras quia. Ut elit proin eget vestibulum luctus quam. Donec elit odio ac sed, amet mi aliquet, hac sodales commodo nisl, aliquam excepturi tellus accumsan nostra, quisque cras malesuada sapien. Orci nam, pede amet sit aliquam, eros metus nulla leo vel, tortor amet feugiat, viverra nulla ante mollis vel. Mi rerum morbi viverra erat, ullamcorper leo pede dui, nullam pede, ante vel cras at. Eu velit non lectus volutpat auctor. In nec posuere officiis ea purus ipsum, pellentesque elit ullamcorper, convallis orci inceptos curabitur, platea nibh, mus in lectus elit ligula. Eu viverra, odio tempus eu, risus nulla, ante mauris dui. Mi fusce etiam nonummy, eu sapien cum ut sed diam sed, at nec sed, dis imperdiet dui magna nonummy aliquam eu, elit orci sapien velit. Eget dolor platea porta vestibulum mi. Morbi in mauris mollis maecenas aenean interdum. Eu mauris mus quis, ut orci. Vulputate parturient erat lectus, dui odio, tortor enim elementum, vel eu posuere. Orci elit dolor leo dui nullam, libero vitae...

CSS

/* ___________1. Cancel CSS_____________*/

* {
    background-color: transparent;
    vertical-align: top;
    outline: 0;
    padding: 0;
    margin: 0;
}

html {
    overflow: auto;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    z-index: 0;
    line-height: 1;
    background-color: silver;
}

body::before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}

.holder {
    margin: 0 auto;
    width: 75%;
}


/* ___________2. Typical elements_____________*/

#page {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

header {
    height: 50px;
    background-color: red;
    position: relative;
    z-index: 3;
}

section {
    position: relative;
    z-index: 1;
    padding-bottom: 50px;
}

footer {
    height: 50px;
    margin-top: -50px;
    background-color: red;
    position: relative;
    z-index: 2;
}


/* ___________3. Fonts_____________*/


/* ___________4. Default_____________*/


/* ___________5. Header_____________*/


/* ___________6. Content_____________*/


/* ___________7. Footer_____________*/


/* ___________8. Media_____________*/