CODEWITHSUNDEEP
htmlcssfooter
Sushi
Sushi

Reputation: 676

How to put a footer on bottom using css?

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>

Upvotes: 0

Views: 121

Answers (9)

Sumit patel
Sumit patel

Reputation: 3903

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

Upvotes: 0

Tushar
Tushar

Reputation: 4418

.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

Upvotes: 0

Prabhat-VS
Prabhat-VS

Reputation: 1530

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;
}

Upvotes: 0

Pankaj Prakash
Pankaj Prakash

Reputation: 2428

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;
}

Upvotes: 0

user6693981
user6693981

Reputation:

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

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

Upvotes: 1

z0mBi3
z0mBi3

Reputation: 1544

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>

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 3

freewheeler
freewheeler

Reputation: 1356

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

Upvotes: 0

Dino
Dino

Reputation: 8292

Add this to .footer

margin-top:50px;

Upvotes: 0

Related Questions