html - 页脚位置不会粘在底部

Question

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

我似乎也无法让 Ryan 的粘性页脚正常工作。有人可以帮忙吗？这是示例: 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"> 。我使用了两种方法来实现此目的，现在您可以从中选择最好的。

Approach 1:

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

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

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

Also to remove the gap that was coming because of p tag here is the css:

footer p {
  margin: 0px;
}

Here is the working snippet:

$('.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>

Approach 2:

该解决方案基于使用calc()方法计算page--wrapper的高度排除页脚:

$('.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>

希望这对您有所帮助。请在整页上查看此内容。