如何制作固定的页脚？

Question

// here is the function authenticate
async function authenticate(uname, pword) {
  return new Promise(function (resolve, reject) () {
    User.find({username: uname}, 'password', function (err, result) {
      if (err !== null){
        resolve(false);
      }
      else{
        if (pword === result[0].password){
          console.log("Correct Password!");
          resolve(true);
        }
        // Also add an else here, to ensure the promise always ends:
        else {
          resolve(false);
        }
      }
    });
  });
}

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

我尝试将固定位置提供给页脚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>

Answer 2

在您的代码中section标记未完成。也改变了CSS。这是工作解决方案。

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