Creating a basic sticky footer using HTML and CSS

html

The snippets below can be used as a boilerplate for creating a basic sticky footer.

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div class="wrapper">
        <p>main content</p>
    </div>

    <div class="footer">
        <p>footer content</p>
    </div>
</body>
</html>
* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    margin-bottom: -60px;
}

.wrapper:after {
    content: "";
    display: block;
}

.footer, .wrapper:after {
    height: 60px;
}

more HTML posts

more CSS posts