在引导程序中具有可变高度的粘性页脚
Posted
技术标签:
【中文标题】在引导程序中具有可变高度的粘性页脚【英文标题】：Sticky footer with variable height in bootstrap 【发布时间】：2017-03-24 10:31:05 【问题描述】：我正在尝试在我的网站上获得一个具有自定义高度的粘性页脚，但事实证明这比我预期的要困难得多。
这是我此刻页脚的屏幕截图：
页脚覆盖了我的联系表单，因为我已明确设置高度为 419 像素。
在内容比屏幕短的页面上，页脚可以固定在底部...但这只是因为我明确设置了高度。
这是我的 CSS 和 html：
html
position: relative;
min-height: 100%;
body
background: #ffffff;
body > .container
padding-bottom: 100px;
/* footer */
footer
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 419px;
background-color: #222;
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">
<img src="">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a class="" href="">
<i class="fa fa-home" aria-hidden="true"></i>
Home
</a>
</li>
<li>
<a class="" href="">
<i class="fa fa-certificate"></i>
Courses
</a>
</li>
<li>
<a class="" href="">
<i class="fa fa-lightbulb-o"></i>
Our Method
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="sign-in" href="">
Dashboard
<i class="fa fa-tachometer"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- end navigation -->
<!-- main content -->
<main>
</main>
<!-- end main content -->
<!-- footer -->
<footer>
<div class="container-fluid bg-footer">
<div class="container">
<!-- footer menus -->
<div class="row">
<div class="col-md-3">
<h3>About</h3>
</div>
<div class="col-md-3">
<h3>Help</h3>
<ul class="list-unstyled">
<li>
<a href="">
Go to a class
</a>
</li>
<li>
<a href="">
Find an order
</a>
</li>
<li>
<a href="">
Courses
</a>
</li>
<li>
<a href="">
Jobs
</a>
</li>
<li>
<a href="">
Contact us
</a>
</li>
<li>
<a href="">
About us
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3>Social</h3>
<ul class="list-unstyled">
<li>
<h3>
<i class="fa fa-facebook" aria-hidden="true"></i>
</h3>
</li>
<li>
<h3>
<i class="fa fa-twitter" aria-hidden="true"></i>
</h3>
</li>
<li>
<h3>
<i class="fa fa-vk" aria-hidden="true"></i>
</h3>
</li>
</ul>
</div>
<div class="col-md-3">
<div class="form-group">
<a class="btn btn-alt btn-block" href="">
Student Login
</a>
</div>
<div class="form-group">
<a class="btn btn-alt btn-block" href="">
Teacher Login
</a>
</div>
</div>
</div>
<!-- end footer menus -->
<hr>
<!-- footer subtext -->
<div class="row">
<div class="col-md-12">
<span class="text-muted">
High quality English lessons
<div class="pull-right">
<a href="">Privacy</a> | <a href="">Terms and Conditions</a>
</div>
</span>
</div>
</div>
<!-- end footer subtext -->
</div>
</div>
<!-- sub footer -->
<div class="container-fluid bg-copyright">
<div class="container">
<p class="copyright">
© 2016 Toucan-Talk.com ltd
</p>
</div>
</div>
<!-- end sub footer -->
</footer>
<!-- end footer -->
</body>
</html>如何让页脚贴在页面底部 a).没有它重叠到我的内容和b）。无需显式设置页脚的高度。
【问题讨论】：
只需将padding-bottom 的body > .container 增加到页脚高度.. body > .container padding-bottom: 419px;
【参考方案1】：
在您的情况下，我建议使用 Flexbox。使用 Flexbox 的一大优势是您不再需要为页脚设置特定的高度。
您只需将 CSS 更改为以下内容即可实现您想要的效果
html, body
height: 100%;
body
background: #ffffff;
display: flex;
flex-flow: column;
footer
margin-top: auto;
background-color: #222;
【讨论】：
该死，这行得通...哇，不用大惊小怪，几乎没有任何 CSS。这是解决方案，非常感谢。 @JethroHazelhurst 不客气，很高兴能帮上忙。【参考方案2】：如果页脚有固定高度，只需将 CSS 编辑为：
body
background: #ffffff;
padding-bottom: 419px;
【讨论】：
现在正在尝试，但这并不能改变这样一个事实，即如果我的页脚高度发生变化，我将不得不编辑我的 CSS，不过感谢您的回答。 你应该避免那么多的填充。这不是一个好的答案，因为使用太多的填充会产生其他问题。 如果页脚有动态内容，您可以添加一些 javascript 来处理 CSS 规则 $('body').css('padding-bottom':$('footer').height ()+'px'); @leo 我可以期待什么样的问题，这是针对生产网站的，我想利用最佳实践解决方案，到目前为止 Mdks 解决方案有效。 不，这不是好的做法。永远不要在 100 之后使用 padding 或 maring。只有在我们不能使用其他东西的情况下。最好尝试使用位置和顶部和底部而不是这种填充解决方案。以上是关于在引导程序中具有可变高度的粘性页脚的主要内容，如果未能解决你的问题，请参考以下文章