我试图让页脚粘在页面底部，并在最后一个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;
}
由于
答案 0 :(得分：3)
在您的代码中添加了粘性页脚代码，方法是
<div class="page--wrapper">。我已经使用了两种方法来实现这一目标，现在你可以选择最好的方法了。
方法1：
将margin-top:-80px应用于80px页脚高度的包装器：
.page--wrapper {
min-height: 100%;
/* equal to footer height */
margin-bottom: -80px;
}
其中负边距是页脚元素的高度。
此外，为了消除由于 p tag 而产生的差距 css：
footer p {
margin: 0px;
}
以下是工作片段：
$('.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：
此解决方案基于使用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>
希望有这个帮助。请在整页上查看。
答案 1 :(得分：1)
尝试在页脚元素上添加position: absolute;：
footer
{
width: 100%;
background-color: #efefef;
text-align: left;
bottom:0;
position: absolute;
}
如果您想使用left，top，right或bottom，则元素不能处于静态默认位置。
答案 2 :(得分：1)
只需添加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>
答案 3 :(得分：0)
将<p>更改为<span>。下面的空格可能是因为<p>的{{1}}
margin-bottom答案 4 :(得分：0)
添加此代码：
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>