CODEWITHSUNDEEP
htmlcss
Mincong Huang
Mincong Huang

Reputation: 5552

How to place a footer at the bottom of a page in CSS?

I tried to create a page footer for each page. The objectif is to center the footer and to place it at the bottom of the page. You can check my JSFiddle, or see the code directly as following.

HTML 

<div id="page1" class="page">
  <div class="footer">
    <p>1</p>
  </div>
</div>

CSS

div.page {
    height: 300px;
    width: 180px;
    border: 1px solid #000;
    margin: auto;
    margin-bottom: 5px;
    text-align: center;
}
div.footer {
    background-color: #DDD;
    width: 100%;
    bottom: 0; /* doesn't work */
}
p {
    width: 15px;
    color: white;
    background-color: red;
    text-align: center;
    margin: auto;
    bottom: 0;
}

I saw to similar question about How to position div at the bottom of a page ?. However, when i applied its proposition, bottom + position setting, footers in each page are all merged together, placed at the bottom of the navigator's windows. Here's the related JSFiddle

Can somebody help ? Thanks a lot.

Upvotes: 0

Views: 99

Answers (2)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

You are missing position: relative; applied to the class="page". This way the element which has absolute position applied knows that needs to be bottom:0 relative to the parent element .page.

div.page {
    height: 300px;
    width: 180px;
    border: 1px solid #000;
    margin: auto;
    margin-bottom: 5px;
    text-align: center;
    position:relative;
}
div.footer {
    background-color: #DDD;
    width: 100%;
    bottom: 0; /* it works now */
    position: absolute;
}
p {
    width: 15px;
    color: white;
    background-color: red;
    text-align: center;
    margin: auto;
    bottom: 0;
}

DEMO http://jsfiddle.net/9xzb9m48/3/

Upvotes: 1

Ushma Shah
Ushma Shah

Reputation: 179

Try this:

div.page {
  height: 300px;
  width: 180px;
  border: 1px solid #000;
  margin: auto;
  margin-bottom: 5px;
  text-align: center;
  position: relative;
}
div.footer {
  background-color: #DDD;
  width: 100%;
  position: absolute;
  bottom: 0;
}
p {
  width: 15px;
  color: white;
  background-color: red;
  text-align: center;
  margin: auto;
  bottom: 0;
}

Upvotes: 1

Related Questions