带有Bootstrap和不固定高度的粘性页脚

8ehkhllq 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(2)|浏览(128)

我使用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; 
}

字符串

twitter-bootstrap

来源：https://stackoverflow.com/questions/49927996/sticky-footer-with-bootstrap-and-un-fixed-height

2条答案

按热度按时间

uqdfh47h1#

使用页脚上的固定位置：

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

字符串

赞(0）回复(0）举报 2023-08-01

m2xkgtsf2#

使用固定定位，并制作您自己的：

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

个字符

赞(0）回复(0）举报 2023-08-01

我来回答

带有Bootstrap和不固定高度的粘性页脚

2条答案

相关问题

热门标签

最新问答