我有一个这样的Blade主模板，它允许我使用一个模板来容纳许多不同的容器，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>
@yield('title')
</title>
@include('libs.libs')
@include('google.analytics')
</head>
<body>
@include('partials.nav_sched')
<div class="container">
@yield('content')
</div>
@yield('schedule')
</body>
<div class="panel-footer navbar-bottom">
@include('partials.footer-sched')
</div>
</html>
@include('js.libs')
@include('js.add-class')
问题是，我的页脚位于页面中间：
这是我的
partials/footer-sched：<div class="container">
<p class="text-muted text-center">
Made with ♥ by Drexel Students for Drexel Students
</p>
<h6 class="text-muted text-center">
<small>
<a href="http://www.contact.com/contact-me/">Contact Me</a>
</small>
</h6>
</div>
我尝试了很多方法，例如使用自定义CSS将页脚从主体中移除：
.panel-footer{
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
background-color: #ffffff;
}
我只是无法将页脚放在页面底部。我不希望粘贴页脚，但我只想要一个停留在页面底部的页脚。
最佳答案
尝试使用此：
在container div中添加一个新类'contentHeight'，其中包含您的所有内容，或者是顶部导航和底部页脚之间的中间div。
在body标记结束处的html代码底部添加此代码<script>var canvasHeight = $(window).height();var navHeight = $('.nav').height();
//'nav' this should be replaced with class name which your navigation has in originalvar footerHeight = $('.panel-footer').height();var addHeight = canvasHeight - (navHeight + footerHeight)$(document).ready(function (){$('.contentHeight').css('min-height', addHeight)});</script>
您在问题中发布的代码在封闭的<div class="panel-footer navbar-bottom">...</div>标记之外显示</body>。得到它里面。
从页脚div中删除所有position: absolute; css，以将其恢复为html正常格式。
关于html - Bootstrap页脚位于页面中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32172463/