CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Ashutosh Shrestha
Ashutosh Shrestha

Reputation: 140

How to make a fixed footer?

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

How do I pull the footer section to the bottom of the screen??

.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.?

Upvotes: 0

Views: 99

Answers (2)

ashutosh
ashutosh

Reputation: 68

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>

Upvotes: 1

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

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>

Upvotes: 0

Related Questions