Floating footer

by suefeng

HTML

<div class="wrapper">
<div class="about">
    <div class="blurb">Stunning Imagery and resourceful imaging
    </div>
    <div class="article">
        <div id="container">
            <img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
        </div>
        <div class="heading">Architectural Photography
        </div>
        <p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
        </p>
    </div>
    <div class="article">
        <div id="container">
            <img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
        </div>
        <div class="heading"> Aerial Services
        </div>
        <p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
        <p>Registered CAA pilot with commercial flight permissons</p>
        <p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
        <p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
        <p>Agronomy - Crop analysis, multispectral imaging</p>
        <p>&nbsp;</p>
    </div>
    <div class="article-centre">
        <div id="container">
            <img...

CSS

* {
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.wrapper {
    position: relative;
    min-height: 100%;
}
.footer
{
    height: 140px;
    display: block;
    overflow: hidden;
    position: absolute;
}

.footer a[href*="mailto"] {
    word-break: break-all;
}

p {

    font-family: HindRegular;
    font-size: 13px;
    font-weight: normal;
    display: block;
    margin-top: 1.5em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

.article {
    font-family: HindRegular;
    width: 21%;
    padding-right: 4%;
    color: #999;
    display: inline-block;
    vertical-align: top;
}

.article-right {
    font-family: HindRegular;
    width: 21%;
    padding-left: 4%;
    color: #999;
    display: inline-block;
    vertical-align: top;
}

.article-centre {
    font-family: HindRegular;
    width: 21%;
    padding-left: 2%;
    padding-right: 2%;
    color: #999;
    display: inline-block;
    vertical-align: top;
}

.blurb {
    font-family: HindMedium;
    font-size: 24px;
    color: #999;
    padding: 20px 0;
}

.about {
    font-family: HindMedium;
    font-size: 13px;
    min-width: 800px;
    text-align: left;
    width: 100%;
}

.heading {
    font-family: HindMedium;
    font-size: 24px;
    color: #666;
    margin-top: 1em;
}

.copyright {
    display: inline-block;
    vertical-align: top;
}

.contact {
    display: inline-block;
    vertical-align: top;
    font-family: HindRegular;
    color: #999;
}

#container {
    width: 100%;
}

#container img {
    width: 100%;
}

h8 {
    font-family: HindRegular;
    color: #999;
    padding-right: 5px;
    font-style: normal;
}

.footer {
    background-color: #FFF;
    height: 120px;
    width: 100%;
    border-top: 1px solid #ccc;
    padding-top: 1em;
}

a {
    border-bottom: 1px solid #219edf;
    padding: 0;
    margin: 0 0 2px 0;
    clear: both;
    color: #666;
    text-decoration: none;
    font-weight: normal;
    outline: none;
    transition: all...

JavaScript

(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());