如何将引导页脚设置到页面末尾？
Posted
技术标签:
【中文标题】如何将引导页脚设置到页面末尾？【英文标题】：How to set bootstrap footer to the end of the page? 【发布时间】：2020-02-26 12:53:19 【问题描述】：我尝试使用Material Design for Bootstrap 创建一个网站。这个网站应该在网站的末尾有一个页脚。但是页脚出现在网站的末尾，而不是在中间（在大屏幕上）。 我认为有一些 CSS 魔法是必要的。但我不知道如何使用 css 魔法。 有人可以帮帮我吗？
最好的问候，马吕斯
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/js/mdb.min.js"></script>
<header>
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</header>
<main>
<div class="card m-5" style="width: 22rem;">
<div class="view overlay">
<img src="https://via.placeholder.com/352x150" class="img-fluid" >
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem Ipsum dolor Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. C/O https://placeholder.com/text/lorem-ipsum/
</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</main>
<footer class="page-footer font-small blue pt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns to organize your footer content.</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
</div>
</footer>【问题讨论】：
由于您使用的是Bootstrap，您可以使用它的position utilities来修复底部的页脚 但我希望页脚位于页面末尾 - 不固定在实际视图的底部，因为这样页脚会与主要内容重叠。 当然，您还将添加边距/填充以补偿页脚，使其不重叠 那是我的问题。页尾如何使用margin/padding设置页脚？ 【参考方案1】：试试这个解决方案..
我只是从 main 的 100vh 高度中删除了 header 和 footer 的高度。
<main style="min-height: calc(100vh - 223px); display: inline-block; width: 100%;">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/js/mdb.min.js"></script>
<header>
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</header>
<main style="min-height: calc(100vh - 223px); display: inline-block; width: 100%;">
<div class="card m-5" style="width: 22rem;">
<div class="view overlay">
<img src="https://via.placeholder.com/352x150" class="img-fluid" >
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem Ipsum dolor Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. C/O https://placeholder.com/text/lorem-ipsum/
</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</main>
<footer class="page-footer font-small blue pt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns to organize your footer content.</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
</div>
</footer>【讨论】：
以上是关于如何将引导页脚设置到页面末尾？的主要内容，如果未能解决你的问题，请参考以下文章