Bootstrap 响应式粘页脚
Posted
技术标签:
【中文标题】Bootstrap 响应式粘页脚【英文标题】：Bootstrap Responsive sticky footer 【发布时间】：2017-07-19 12:48:54 【问题描述】：我在一个简单的页脚上绕了 1 天，该页脚位于页面底部，未固定。
我已经设法将它放在全屏页面的底部。但是，当我减小浏览器窗口的宽度以模拟“响应式显示”时，当我向下滚动页面时，页脚会停留在同一位置，因此不会向下刷新。
这是我的html：
<html>
<body>
<div class="container">
<div class="row text-center">
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
还有我的 CSS：
html
height: 100%;
body
height: 100%;
padding-bottom: 30px;
.footer
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
我在页脚上尝试过 Bootstrap 的列，如下所示：
<div class="col-md-12 col-xs-12">
<div class="footer text-center">
<p class="small">© 2017 Le Point G</p>
</div>
</div>
但是这种方法似乎不合适，因为它在我的不同页面上不一致，因为内容量从一个页面到另一个页面不同，或多或少地向下推页脚。
有更好的建议吗？
【问题讨论】：
【参考方案1】：你可以有position:absolute 只需添加
min-height:100%;position:relative;
到您的容器或行。
.row
min-height:100%;
position:relative;
html
height: 100%;
body
padding-bottom: 30px;
.footer
position:absolute;
background-color: blue;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="row text-center" >
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>说明
容器 div 有一个 min-height:100% -- 这将确保它保持在屏幕的整个高度，即使几乎没有任何内容。容器 div 设置为 position:relative; 这允许我们在其中绝对定位元素。
页脚具有以 px 为单位的设定高度。页脚绝对定位为底部：0，这会将其移动到容器 div 的底部。当页面上的内容很少时，容器 div 恰好是浏览器视口的高度，因为它设置为 min-height:100% 并且页脚位于屏幕底部。当内容超过一页时，容器 div 会变大并向下延伸到视口底部下方 - 页脚仍位于容器 div 的底部。页脚也设置为width:100%;，因此它覆盖了整个页面。
【讨论】：
但是如果我这样做，当没有足够的内容“下推”时，它不会停留在页面底部。 你需要给你的身体一个最小宽度，这样即使内容不够长，页脚也会留在底部 这个最小宽度需要多少？ 您需要针对不同的屏幕尺寸使用媒体查询..等等，我为您提供了一个 sn-p 示例 检查sn-p..你可以通过轻微的修改来实现它..将min-height:100%; position:relative;添加到你的容器中【参考方案2】：
如果我正确理解您的问题，您希望页脚始终固定在窗口底部，无论页面内容的长度如何。
如果是这样，请尝试position: fixed 而不是position: absolute
html
height: 100%;
body
height: 100%;
padding-bottom:30px;
.footer
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color:white;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="container">
<div class="row text-center">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a
display: block;
width: 300px;
height: 80px;
</code></pre>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>【讨论】：
如果我表达不清楚，我很抱歉。我不希望它被修复，而是始终位于页面底部，尤其是当窗口宽度减小时，这是我努力实现的目标。 如果不是fixed，我不确定您所说的“始终位于页面底部”是什么意思。按页面，你指的是内容还是窗口？【参考方案3】：
使用 Bootstrap3，您可以使用 navbar-fixed-bottom 类。
它不是那么好，但它的工作原理。
HTML：
<html>
<head>..</head>
<body>....
<div class="navbar-fixed-bottom">
<p>Your Text</p>
</div>
</body>
</html>
Something like that, but with "div" tags - w3schools
片段：
html, body
margin: 0%;
padding: 0%;
.container
height: 600px;
background-color: #6c6c6c;
myFooter
background-color: #fff;
@media screen and (min-width: 480px)
footer
position: absoulute;
bottom: 0;
background-color: #000 !important;
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid text-center">
<p>Some Text in Container</p>
</div>
<footer class="myFooter text-center">
<p>Footer Text - Resize Window</p>
</footer>
</body>【讨论】：
抱歉造成误会。我不希望页脚固定，但始终位于页面底部，这是我在桌面页面中实现的，而不是在移动页面中。 您可以将@media screen and (min-width: 480px) 之类的内容作为 CSS 添加到类或页脚中。在那里您可以添加 CSS 规则，例如 position: fixed; 以将页脚设置到页面底部。
我编辑了我的答案。在 sn-p 中，我在 css 中添加了 @media ... 。在这里你现在可以添加 CSS 来设置底部的页脚等等......【参考方案4】：
<style>
.footer
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
</style>
<!-- Footer -->
<footer class="page-footer font-small indigo">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Very long link 1</a>
</li>
<li>
<a href="#!">Very long link 2</a>
</li>
<li>
<a href="#!">Very long link 3</a>
</li>
<li>
<a href="#!">Very long link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
【讨论】：
感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。以上是关于Bootstrap 响应式粘页脚的主要内容，如果未能解决你的问题，请参考以下文章