Footer Down

by Alex

HTML

<header class="header">
    <div>Fucking header</div>
</header>
<main class="cont">
    <div>Fucking Content</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam ipsa sit recusandae sapiente sed modi quo eos neque atque ab quos doloribus libero in ad quam dolor repudiandae aliquam sunt! <label for="more" class="switch">more</label></div>
    <input type="checkbox" id="more" />
    <div class="more">
        <div>Expedita itaque et rerum laborum sit modi quaerat non excepturi reiciendis alias voluptatum ex earum dignissimos at distinctio praesentium quia quasi delectus sequi fugit aliquam dolore labore blanditiis natus explicabo!</div>
        <div>Facere commodi explicabo fugiat alias tenetur illum maiores ipsam hic enim deleniti tempora laudantium excepturi ab ratione itaque animi consectetur. Ipsa rem modi ut omnis dolore suscipit fuga eum itaque.</div>
        <div>Consequatur qui quo libero aspernatur culpa numquam exercitationem amet incidunt eligendi iste aut quisquam fuga beatae debitis eaque minus id saepe molestias impedit explicabo ex quae veniam recusandae asperiores quia!</div>
        <div>Nemo reprehenderit sed voluptates quod ipsam maiores officia minus aut deleniti magnam similique in beatae nostrum accusantium non quidem sunt! Similique dolores deserunt est alias officiis corrupti ratione porro reprehenderit.</div>
        <div>Expedita itaque et rerum laborum sit modi quaerat non excepturi reiciendis alias voluptatum ex earum dignissimos at distinctio praesentium quia quasi delectus sequi fugit aliquam dolore labore blanditiis natus explicabo!</div>
        <div>Facere commodi explicabo fugiat alias tenetur illum maiores ipsam hic enim deleniti tempora laudantium excepturi ab ratione itaque animi consectetur. Ipsa rem modi ut omnis dolore suscipit fuga eum itaque.</div>
        <div>Consequatur qui quo libero aspernatur culpa numquam exercitationem amet incidunt eligendi iste aut quisquam fuga beatae debitis eaque minus...

CSS

html {
    min-height: 100%;
	font-family: sans-serif;
    position: relative;
}
body {
    margin: 0;
}

.header {
    background: #004A50;
    width: 1000px;
    font-weight: bold;
    color: #fff;
    margin: auto;
    padding: 10px;
}
.cont {
    width: 1000px;
    margin: auto;
    padding-bottom: 100px;
}
.switch {
    font-weight: bold;
    color: #008;
    cursor: pointer;
}
#more {
    display: none;
}
#more:checked+.more {
    display: block;
}
.more {
    display: none;
}
.footer {
    background: #B13119;
    width: 1000px;
    height: 100px;
    font-weight: bold;
    color: #fff;
    margin: auto;
    padding: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
}