html - 如何制作固定页脚？

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

我已经尝试将固定位置赋予页脚 div 和底部 0，但随后它离开了 div 并否定了外部主包装器的填充。我该如何修复它，这样我就不必为内容包装器指定特定的高度，内容 div 的高度会适应设备并且页脚固定在底部。？

Answer 1

您必须减小页脚的宽度以使其与页眉相似。

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