logo
  • Blog
  • Contacts
  • Shop
  • Español (España)
  • Russian (Russia)
  • Home >
  • Layout

How to push a footer to the bottom

Layout
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;
}
blog comments powered by Disqus

Categories

  • JavaScript
  • Layout
  • PHP
  • CMS
  • Other
® COPYRIGHT 2019