How to put a footer on bottom using css? - html

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>

Answer 1

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>

Answer 2

For best practice always set body and html 0 margin and 0 padding.
body,html{
margin:0;
padding:0;
}

Answer 3

Add this to .footer
margin-top:50px;

Answer 4

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

Answer 5

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>

Answer 6

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

Answer 7

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

Answer 8

.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

Answer 9

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