How to make a fixed footer?

Question

  <section>
<div class="main-wrapper">
  <div class="upper-div">
    <img src="images/pic.jpg" class="img-responsive" alt="">
  </div>
  <div class="lower-div">
    <div class="header">
      <p>Header</p>
    </div>
    <div class="content">
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi possimus alias numquam sunt perspiciatis sint, molestiae aperiam, rerum, deleniti quos. Repellat tenetur, repudiandae quae odit obcaecati libero magnam vero.</p>
      </div>
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p>
      </div>
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p>
      </div>
    </div>
    <div class="footer">
      <p>Footer</p>
    </div>
  </div>
</div>

.main-wrapper{
padding:15px;
}

.header,
.footer{
     text-align: center;
}

.header p,
.footer p{
    padding:10px;
    background-color: green;
    color: white;
}

.content{
    height: 200px;
    overflow: scroll;
}

.content-card{
    border-bottom: 1px solid black;
}

I've tried giving the fixed position to the footer div and bottom 0 but then it goes out of the div and negates the padding of the outer main-wrapper. How do i fix it so i dont have to give specific height to the content wrapper and the height of the content div adapts to the device and the footer is fixed in the bottom.?

can you clarify your question please. u want the footer to remain in its parent div and respect the padding of its parent but to also be fixed at the bottom of the screen? — oldboy, Dec 13 '17 at 04:45
Possible duplicate of [Twitter Bootstrap 3 Sticky Footer](https://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer) — jarvo69, Dec 13 '17 at 04:57
you'll need to fill your viewport. Make `html, body, otherContainers {height: 100%;}` — Gezzasa, Dec 13 '17 at 05:15

score 1 · Accepted Answer · answered Dec 13 '17 at 05:54

You have to reduce the width of the footer to make it similar to your header.

.main-wrapper{
padding:15px;
}

.header,
.footer{
     text-align: center;
}

.header p,
.footer p{
    padding:10px;
    background-color: green;
    color: white;
}

.content{
    height: 200px;
    overflow: scroll;
}

.content-card{
    border-bottom: 1px solid black;
}
.footer {
  position: fixed;
  bottom: 0;
  right: 20px;
  left: 20px;
  width: 93%;
}

 <section>
<div class="main-wrapper">
  <div class="upper-div">
    <img src="images/pic.jpg" class="img-responsive" alt="">
  </div>
  <div class="lower-div">
    <div class="header">
      <p>Header</p>
    </div>
    <div class="content">
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi possimus alias numquam sunt perspiciatis sint, molestiae aperiam, rerum, deleniti quos. Repellat tenetur, repudiandae quae odit obcaecati libero magnam vero.</p>
      </div>
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p>
      </div>
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p>
      </div>
    </div>
    <div class="footer">
      <p>Footer</p>
    </div>
  </div>
</div>
</section>

can you help me with the height of the content div !? I want the scroll to show when the items in that div touches the footer div, so i don't want to give specific height to the content div. — Ashutosh Shrestha, Dec 13 '17 at 06:07
use max-height and overflow:auto in your content class. This must work. — ashutosh, Dec 13 '17 at 07:15

score 0 · Answer 2 · answered Dec 13 '17 at 05:18

In your code section tag was not completed. Also made changes in css. Here is the working solution.

.main-wrapper{
padding:15px;
}

.header,
.footer{
     text-align: center;
}

.header p,
.footer p{
    padding:10px;
    background-color: green;
    color: white;
}

.content{
    height: 200px;
    overflow: scroll;
}

.content-card{
    border-bottom: 1px solid black;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

 <section>
<div class="main-wrapper">
  <div class="upper-div">
    <img src="images/pic.jpg" class="img-responsive" alt="">
  </div>
  <div class="lower-div">
    <div class="header">
      <p>Header</p>
    </div>
    <div class="content">
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi possimus alias numquam sunt perspiciatis sint, molestiae aperiam, rerum, deleniti quos. Repellat tenetur, repudiandae quae odit obcaecati libero magnam vero.</p>
      </div>
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p>
      </div>
      <div class="content-card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A error libero impedit sequi quae blanditiis assumenda, dolores beatae mollitia quas dolor voluptatibus saepe voluptate quod velit id eaque nostrum architecto.</p>
      </div>
    </div>
    <div class="footer">
      <p>Footer</p>
    </div>
  </div>
</div>
</section>

How to make a fixed footer?

2 Answers2