我正在使用Flask / Jinja2块来创建HTML。我遇到了这个问题，我的页脚在中间。它在内容较少或没有内容的页面中看起来很好（在底部）。我已经尝试了一切。
这是HTML和CSS：
h1, h2, h3, h4 { font-family: Sansita, serif }
p { font-size: smaller }
ul { position: relative; top: 25px; right: 25px }
footer{ position: absolute; width: 100%; background: aliceblue; bottom: 0; height: 50px}<!DOCTYPE html>
<html lang="en">
<head>
<title> books inc </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
<link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<a class="navbar navbar-text" href="/">
<h3 class="title"> The Books Shop Around the Corner </h3>
</a>
<ul class="nav navbar-nav pull-right">
<li><a href=""> Home </a></li>
<li><a href=""> Register </a></li>
<li><a href=""> SignIn </a></li>
</ul>
</div>
</nav>
<div class="container books">
<div class="row">
<div class="col-md-4">
<img src="static/img/broom-145379.svg"
alt="book-img" height="200" width="180" class="img-rounded">
<h4>Miky's Delivery Service</h4>
<p>Authors: William Dobelli</p>
<p>Format: ePub</p>
<p>Rating: 3.9</p>
<p>Pages: 123</p>
<p><a href="/display/publisher/1">Publisher Id: 1</a></p>
</div>
</div>
</div>
<footer>
<br>
<p class="text-center small"> Books Inc | 2017</p>
</footer>
</body>
</html>你的问题是position: absolute。这会将项目准确放置在放置它的位置，位于屏幕的底部。如果内容溢出，则页脚会保持不变。你真正想要的是position: fixed
你的页脚是绝对的位置。所以使用position：fixed并构建你的css如下：
footer {
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
background: aliceblue;
}
如果您想要IE6的css兼容性，请不要忘记这样做。
* html footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+
(document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight)+
(ignoreMe = document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
您也可以删除页脚中的br。在这个用例中更喜欢使用填充顶部。它更清洁。