页脚位置不会粘在底部

Question

我试图让页脚与最后一个 div 和页脚之间的间距一起粘在页面底部。我在 stackoverflow 上尝试了许多解决方案，但它们往往只能“工作一半”，在全屏下看起来不错，但是当我模仿手机或平板设备时，位置又关闭了。

我似乎也无法让 Ryans 粘性页脚工作。任何人都可以帮忙吗？这是示例： https://codepen.io/apullz/pen/bWrbxJ

如您所见，底部和浅灰色页脚之间有一个小间隙。

HTML：

<footer>
    <p class="text-muted ">102 Harrow Inn <br />
    Wellington<br />
    SN2 k8S<br />
    Tel:12345678</p>
</footer>

CSS：

html body {
margin:0;
padding:0;
height:100%;
}
footer  
{
width: 100%;
background-color: #efefef;
text-align: left;
bottom:0;
}

谢谢

Answer 1

通过包装元素在代码中添加粘性页脚代码 在 div 中的页脚之前 <div class="page--wrapper">。我已经使用了 2 种方法来实现这一点，现在您可以从中选出最好的。

方法一：

将margin-top:-80px 应用于包装器，其中80px 是页脚的高度：

.page--wrapper {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -80px;
}

其中负边距是页脚元素的高度。

也为了消除由于 p 标签而出现的差距，这里是 CSS：

footer p {
  margin: 0px;
}

这里是工作的 sn-p：

$('.carousel').carousel({});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/* Navbar Config Logo  */

.navbar-brand {
  padding: 0;
}

.navbar-brand>img {
  height: 100%;
  padding: 10px;
  width: auto;
}


/* Carousel */

.left {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

.right {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px
}

.carousel-inner {
  border-radius: 10px;
}


/*footer*/

.container {
  min-height: 100%
}

.page--wrapper {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -80px;
}

footer {
  width: 100%;
  background-color: #efefef;
  text-align: left;
}

footer p {
  margin: 0px;
}

@media (max-width:768px){
.page--wrapper {

  margin-bottom: 0px;
}
}

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script type="text/javascript">
  $(".carousel").carousel({});
</script>
<div class="page--wrapper">
  <nav class="navbar navbar-inverse bg-inverse navbar-static-top">
    <div>
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="img/VB.png" alt="Shoplayout"></a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Mods</a></li>
            <li><a href="#">Tanks</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">E-Liquid</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </nav>


  <div class="container textcontent">

    <div>
      <h1 class="display-3">What is vaping?</h1><br/>
      <p>
        Vaping is a healthier alternative to smoking cigarettes. Vaping is a booming industry, there are currently 2.2 million people using e-cigarettes as an alternative to smoking.</p>
      <p>
        If you have tried to quit smoking before but keep getting pulled back, why not try the harm reduction method of vaping? Visit The Vape Bar for free advice and an array of great products to help you finally quit!</p>
      <p>
        The Vape Bar has a great selection of e-liquid so you will not struggle to find a flavour that suits you
      </p>
      <p>
        As well as e-liquid we stock the best devices ranging from beginner starter kits to advanced vaping gear.
      </p>
    </div>


    <div class="row-fluid center-block" style="max-width: 30%;">
      <div class="span9" ">
	<div id="myCarousel " class="carousel slide " ">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel " data-slide-to="0 " class="active "></li>
          <li data-target="#myCarousel " data-slide-to="1 "></li>
          <li data-target="#myCarousel " data-slide-to="2 "></li>
        </ol>
        <div class="carousel-inner ">
          <div class="item active ">
            <img src="img/slide1.jpeg " width="100% ">
          </div>
          <div class="item ">
            <img src="img/slide2.jpeg " width="100% ">
          </div>
          <div class="item ">
            <img src="img/slide3.jpeg " width="100% ">
          </div>
        </div>
        <a class="left carousel-control " href="#myCarousel " data-slide="prev " style=" "> <span class="glyphicon glyphicon-chevron-left "></span>
          <span class="sr-only ">Previous</span></a>
        <a class="right carousel-control " href="#myCarousel " data-slide="next " style=" "> <span class="glyphicon glyphicon-chevron-right "></span>
          <span class="sr-only ">Next</span></a>
      </div>
    </div>
  </div>
</div>
</div>



<footer>
  <p class="text-muted ">102 Harrow Inn <br /> Wellington
    <br /> SN2 K8S<br /> Tel:12345678
  </p>
</footer>

方法2：

此解决方案基于计算页面高度--wrapper 不包括页脚 使用calc() 方法：

$('.carousel').carousel({});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/* Navbar Config Logo  */

.navbar-brand {
  padding: 0;
}

.navbar-brand>img {
  height: 100%;
  padding: 10px;
  width: auto;
}


/* Carousel */

.left {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

.right {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px
}

.carousel-inner {
  border-radius: 10px;
}


/*footer*/

.container {
  min-height: 100%
}

.page--wrapper {
  min-height: calc(100% - 80px);
  
}

footer {
  width: 100%;
  background-color: #efefef;
  text-align: left;
}

footer p {
  margin: 0px;
}

@media (max-width:768px){
.page--wrapper {

  margin-bottom: 0px;
}
}

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script type="text/javascript">
  $(".carousel").carousel({});
</script>
<div class="page--wrapper">
  <nav class="navbar navbar-inverse bg-inverse navbar-static-top">
    <div>
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="img/VB.png" alt="Shoplayout"></a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Mods</a></li>
            <li><a href="#">Tanks</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">E-Liquid</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </nav>


  <div class="container textcontent">

    <div>
      <h1 class="display-3">What is vaping?</h1><br/>
      <p>
        Vaping is a healthier alternative to smoking cigarettes. Vaping is a booming industry, there are currently 2.2 million people using e-cigarettes as an alternative to smoking.</p>
      <p>
        If you have tried to quit smoking before but keep getting pulled back, why not try the harm reduction method of vaping? Visit The Vape Bar for free advice and an array of great products to help you finally quit!</p>
      <p>
        The Vape Bar has a great selection of e-liquid so you will not struggle to find a flavour that suits you
      </p>
      <p>
        As well as e-liquid we stock the best devices ranging from beginner starter kits to advanced vaping gear.
      </p>
    </div>


    <div class="row-fluid center-block" style="max-width: 30%;">
      <div class="span9" ">
	<div id="myCarousel " class="carousel slide " ">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel " data-slide-to="0 " class="active "></li>
          <li data-target="#myCarousel " data-slide-to="1 "></li>
          <li data-target="#myCarousel " data-slide-to="2 "></li>
        </ol>
        <div class="carousel-inner ">
          <div class="item active ">
            <img src="img/slide1.jpeg " width="100% ">
          </div>
          <div class="item ">
            <img src="img/slide2.jpeg " width="100% ">
          </div>
          <div class="item ">
            <img src="img/slide3.jpeg " width="100% ">
          </div>
        </div>
        <a class="left carousel-control " href="#myCarousel " data-slide="prev " style=" "> <span class="glyphicon glyphicon-chevron-left "></span>
          <span class="sr-only ">Previous</span></a>
        <a class="right carousel-control " href="#myCarousel " data-slide="next " style=" "> <span class="glyphicon glyphicon-chevron-right "></span>
          <span class="sr-only ">Next</span></a>
      </div>
    </div>
  </div>
</div>
</div>



<footer>
  <p class="text-muted ">102 Harrow Inn <br /> Wellington
    <br /> SN2 K8S<br /> Tel:12345678
  </p>
</footer>

希望得到帮助。请在整页上查看。

Answer 2

尝试在您的页脚元素上添加position: absolute;：

footer  
{
    width: 100%;
    background-color: #efefef;
    text-align: left;
    bottom:0;
    position: absolute;
}

如果要使用left、top、right 或bottom，元素不能位于静态默认位置。

Answer 3

只需添加footer p { margin-top: 0; } 即可消除您在页脚顶部看到的空白。

html body {
  margin:0;
  padding:0;
  height:100%;
}
.test{
  background-color: lightgrey;
}
footer  {
  width: 100%;
  background-color: darkgrey;
  text-align: left;
  bottom:0;
}
footer p{  
  margin-top:0px;
}

<div class="test">Something something and something too, something, sweet something and something too. Just something... </div>
<footer>
    <p class="text-muted ">102 Harrow Inn <br />
    Wellington<br />
    SN2 k8S<br />
    Tel:12345678</p>
</footer>

Answer 4

将<p> 更改为<span>。下面的空格可能是因为<p>的margin-bottom

<footer>
    <span class="text-muted ">102 Harrow Inn <br />
    Wellington<br />
    SN2 k8S<br />
    Tel:12345678</span >
</footer>

Answer 5

添加此代码：

footer
 {

    position: absolute;

   /*/ Other Codes /*/
}

完整代码：

html body {
  margin:0;
  padding:0;
  height:100%;
}

footer {
width: 100%;
background-color: #efefef;
text-align: left;
position: absolute;
bottom:0;
}

<footer>
    <p class="text-muted ">102 Harrow Inn <br />
    Wellington<br />
    SN2 k8S<br />
    Tel:12345678</p>
</footer>