How to Stick a Footer to Bottom in CSS

How to stick a footer to bottom in css?

Try setting the styles of your footer to position:absolute; and bottom:0;.

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;

How to stick footer to bottom (not fixed) even with scrolling

I think this might help you.

Just showing you the way how to achieve what you want.

html,body {  margin: 0;  padding: 0;  height: 100%;}#wrapper {  min-height: 100%;  position: relative;}#header {  background: #ededed;  padding: 10px;}#content {  padding-bottom: 100px;  /* Height of the footer element */}#footer {  background: #ffab62;  width: 100%;  height: 100px;  position: absolute;  bottom: 0;  left: 0;}
<div id="wrapper">
<div id="header"> </div> <!-- #header -->
<div id="content"> </div> <!-- #content -->
<div id="footer"> </div> <!-- #footer -->
</div><!-- #wrapper -->

How to make footer stick to bottom despite size of content?

see the example code here


<div id="main-wrapper">
<div id="content"> content of any length</div>
<div id="footer">Footer</div>


* {
padding: 0;
margin: 0;
#content {
margin-bottom: 30px;/*same as footer height*/
position: fixed;
height: 30px;
background: #eee;
width: 100%;
text-align: center;

How to make a sticky footer using CSS?

Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note - probably best to use #bottom-footer instead of footer #bottom-footer for the selection of your footer - that could be part of the issue):

html {
position: relative;
min-height: 100%;
body {
margin: 0 0 100px; /* bottom = footer height */
#bottom-footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

Tailwindcss: fixed/sticky footer on the bottom

<div class="flex flex-col h-screen justify-between">
<header class="h-10 bg-red-500">Header</header>
<main class="mb-auto h-10 bg-green-500">Content</main>
<footer class="h-10 bg-blue-500">Footer</footer>

Class justify-between is not required, but I would leave him (for other case).

So, play with h-screen and mb-auto classes.

And you get this UI:

Sample Image

Related Topics

Leave a reply