Question

我正在使用bootstrap 3，我想要一个留在底部的页脚。棘手的部分是页脚由3个并排的图像组成，宽度为100％......因此高度是动态的，随页面宽度而变化。如何在这种情况下完成粘性页脚？非常感谢所有帮助！谢谢！

<div class="container-responsive">
<footer>
<div class="row no-gutter">
  <div class="col-md-4 col-sm-12 col-lg-4 no-padding">
    <a href="#"><img src="images/but-plan.png" alt="Plan" /></a>
  </div>
  <div class="col-md-4 col-sm-12 col-lg-4 no-padding">
    <a href="#"><img src="images/but-administration.png" alt="Administration" /></a>
  </div>
  <div class="col-md-4 col-sm-12 col-lg-4 no-padding">
    <a href="#"><img src="images/but-our-team.png" alt="Our Team" /></a>
  </div>
</div>
</footer>

</div> <!-- container -->

footer a {
  display:block;
}

footer img {
  width:100%; 
  height:auto; 
}

Answer 1

使用固定在页脚上的位置：

footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
}

Answer 2

使用固定定位并自行制作：

import Map from {leaflet};

html,body {
  height:100%;
  overflow-x:hidden /* don't do that */
}
* {
  margin:0;
  padding:0;
}
.xl {
  font-size:1500px;
}
footer {
  position:fixed;
  bottom:0;
  width:100%;
  height:95px;
  overflow:hidden;
}
img {
  width:100%;
  height:auto
}
footer>div {
  width:33.3333333333%;
  float:left;
  position:relative;
}
footer::after {
  content:"\0020";
  width:100%;
  height:100%;
  background:red;
  opacity:.3;
  top:0;
  left:0;
  right:0;
  position:absolute
}
footer>div:nth-child(2n) {
  transform:translateY(-20px);
}

粘性页脚，带有自举和不固定的高度

2 个答案: