How to push a footer to the bottom

21.04.19

There are several ways. All of them are somewhat similar. The first option is the most relevant.

Option 1

HTML

<html>
    <body>
        <div class="content"></div>
        <footer></footer>
    </body>
</html>

CSS

body, html {
    height: 100%;
}
body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

Option 2

A footer height must be fixed

HTML

<html>
    <body>
        <div class="content">
            <main class="main"></main>
        </div>
        <footer class="footer"></footer>
    </body>
</html>

CSS

html,body{
    height: 100%;
}
.content{
    min-height: 100%;
}
.main{
    padding-bottom: 200px;
}
.footer{
    height: 200px;
    margin-top: -200px;
}

Option 3

A footer height must be fixed

HTML

<html>
    <body>
        <div class="content"></div>
        <footer class="footer"></footer>
    </body>
</html>

CSS

html,body{
    height: 100%;
}
.content{
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 200px;
}
.footer{
    height: 200px;
    margin-top: -200px;
}

How to push a footer to the bottom

Option 1

HTML

CSS

Option 2

HTML

CSS

Option 3

HTML

CSS

Categories