How to put a footer on bottom using css?

Question

I've a simple web page that contains a <div> on background (a green rectangle on background) and a second <div> that is the "body" it contains paragraphs, table etc

And on bottom I need to to put a simple footer containing juste copyrights and some socials networks buttons. The problem is : the footer is not on bottom, there is a space under the footer, how to avoid this please ?

See my simple code please

On jsfiddle is better (to see the space under the footer) see here please

.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:-50px auto;
  background-color:gold;
  text-align:center;
}

footer{
  width:100%;
  height:65px;
  background-color:red;
  opacity:0.5;
}

<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>

<footer>this is the footer</footer>

Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — HudsonPH, Aug 10 '16 at 09:15

Mohammad Usman · Answer 1 · 2016-08-10T08:58:48.767

You forgot to remove default margin of body.

Set in css:

body {
  margin: 0;
}

Fiddle

body {
  margin: 0;
}
.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin: -50px auto;
  background-color:gold;
  text-align:center;
}

footer{
  width:100%;
  height:65px;
  background-color:red;
  opacity:0.5;
}

<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>

<footer>this is the footer</footer>

score 1 · Answer 2 · answered Aug 10 '16 at 09:00

1

For best practice always set body and html 0 margin and 0 padding.

body,html{
   margin:0;
   padding:0;
}

answered Aug 10 '16 at 09:00

Prabhat Sinha · Answer 3 · 2016-08-10T09:02:24.277

body {
  margin: 0;
}
.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:10px auto;
  background-color:gold;
  text-align:center;
}

footer{
  width:100%;
  height:65px;
  background-color:red;
  opacity:0.5;
}

<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>

<footer>this is the footer</footer>

Modify content css:

.content{
  width:80%;
  height:300px;
  margin:10px auto;
  background-color:gold;
  text-align:center;
}

score 0 · Answer 4 · answered Aug 10 '16 at 08:56

0

Add this to .footer

margin-top:50px;

answered Aug 10 '16 at 08:56

Dino

7,779
12
46
85

1

Welcome to Stack Overflow! Although this code may help to solve the problem, it doesn't explain _why_ and/or _how_ it answers the question. Providing this additional context would significantly improve its long-term value. Please [edit] your answer to add explanation, including what limitations and assumptions apply. – Toby Speight Aug 10 '16 at 13:10

score 0 · Answer 5 · answered Aug 10 '16 at 08:56

Perhaps you want to stick your footer to the bottom?

Clear the paddings and margins by:

html, body {
   padding:0;
   margin:0;
}

then

footer{
   width:100%;
   height:65px;
   background-color:red;
   opacity:0.5;
   position:absolute;
   bottom:0;
}

Working fiddle

score 0 · Answer 6 · answered Aug 10 '16 at 08:59

Set the min height of body to 100% and set position to absolute.

.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:-50px auto;
  background-color:gold;
  text-align:center;
}

html, body{
  padding: 0;
  margin: 0;
}

html{
  height: 100%;
}    
body{      
  min-height: 100%;
}

footer{
  width:100%;
  height:65px;
  background-color:red;
  opacity:0.5;
  position: absolute:
  bottom: 0;
}

<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>

<footer>this is the footer</footer>

score 0 · Answer 7 · answered Aug 10 '16 at 09:00

For that case you just need to set the margin and padding of body tag to 0.

body {
    margin: 0;
    padding: 0;
}

Or if your site have margins specified you can only set the bottom margin of body as.

body {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

score 0 · Answer 8 · answered Aug 10 '16 at 09:29

.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:-50px auto;
  background-color:gold;
  text-align:center;
  padding-top:100px;
}

footer{
  width:100%;
  height:65px;
  margin-top: -65px;
  background-color:red;
  opacity:0.5;
  position: absolute;
  bottom: 0
}
body {
  margin: 0;
  min-height: 100%;
  padding-bottom: 100px;
  position: relative;
  box-sizing: border-box;
}
html {
  height: 100%;
}

<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>

<footer>this is the footer</footer>

You can fix footer at bottom by position: absolute;

Updated fiddle

score 0 · Answer 9 · answered Aug 10 '16 at 09:42

0

Use position: absolute;bottom: 0; Style in footer class

 footer
   {
    width: 100%;
    height: 65px;
    background-color: red;
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    }

Click Here Live Demo

answered Aug 10 '16 at 09:42

Sumit patel

3,807
9
34
61

How to put a footer on bottom using css?

9 Answers9