RWD - Fluid 100% Height Website and App Design Example - BETTER

by bizamajig

HTML

<div id="wrapper">
    <div id="content">
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
    </div>
    <div id="padding-bottom"></div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: url(http://dummyimage.com/100x100/f0f/fff);
}

#wrapper {
    margin: 0 auto;
    width: 300px;
    height: 100%;
    padding: 15px 0;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    background-color: #C9E6FF;
    min-height: 100%;
}
#padding-bottom {
    height: 15px;
}

JavaScript

$('<button>Clicky!</button>')
.appendTo(document.body)
.click(function() {
    $('#content').html(
        new Array(20).join($('#content').html())
    );
})
.css({
    position: 'fixed',
    top: 0,
    left: 0
});