在我制作的HTML页面中，我想添加一个页脚。我正在使用Bootstrap，并且在this example中显示页脚元素可以定位到页面的底部而不将页脚元素放在容器元素内（直接在body元素内，在容器元素下面）
每当我自己尝试时，看起来元素首先会定位在底部。但后来我注意到其他页面（内容较长），页脚开始出现在浏览器的底部而不是body元素。效果是页脚上方的容器元素将显示在页脚后面和下方，而页脚没有到达主体元素的底部。
请务必滚动以下代码示例：
.body {
overflow: scroll;
background-color: tomato;
/*The height is set so that an overflow: scroll; can happen, to reproduce
my sitation. When the content of the body tag is too long, the browser will
show a scroll bar and when scrolling down, the footer does not appear on the
bottom anymore but somewhere in the middle or maybe even top side, depending on
how long the body would become. */
height: 300px;
position: relative;
}
.container {
background-color: yellow;
/*This would be a dynamic number, when removing this property.
If you do not really understand the idea I am talking about, try to change
this value and see for yourself what happens (with the footer element).
The height is set only for the sake of showing the issue. */
height: 500px;
}
footer {
background: #e0f2f7;
position: absolute;
bottom: 0;
width: 100%;
}<div class="body">
<h2>
Foo
</h2>
<div class="container">
asdasds
</div>
<footer>sadasdsa</footer>
</div>
我可以做些什么来使我的页脚元素表现得像Bootstrap example中那样（因此它总是会粘在底部）并且不必将页脚元素放在某个容器元素中？< / p>
答案 0 :(得分：1)
如果您希望页脚始终在网站底部可见，而不是在容器上方。您需要添加最小高度：100％＆amp; position：相对于html而不是body。对于body元素，您需要添加margin-bottom和footer height的值。
html{
min-height:100%;
position: relative;
}
body {
background-color: tomato;
margin:0 0 60px 0;
padding:0;
}
.container {
background-color: yellow;
height: 300px;
}
footer {
background: #e0f2f7;
position: absolute;
bottom: 0;
width: 100%;
height:60px;
}<html>
<body>
<h2>Foo</h2>
<div class="container">asdasds</div>
<footer>sadasdsa</footer>
</body>
</html>
修改1：
如果你想使页脚的动态高度使用这个JS代码（如果你使用jQuery）
$( document ).ready(function() {
var height = $( 'footer' ).height();
$( 'body' ).css('margin-bottom',height + 'px');
});
答案 1 :(得分：0)
如果我理解你的问题，下面是你想要的结果吗？
这是因为你将身体的高度设置为300px;导致从顶部300px的页脚。删除该行，它应该没问题。
>>> values = np.array(values)
>>>
>>> values[arr]
array([['mother', 'uncle', 'mother'],
['aunt', 'sister', 'father']],
dtype='|S7')
.body {
overflow: scroll;
background-color: tomato;
position: relative;
}
.container {
background-color: yellow;
/*This would be a dynamic number, when removing this property.
If you do not really understand the idea I am talking about, try to change
this value and see for yourself what happens (with the footer element).
The height is set only for the sake of showing the issue. */
height: 500px;
}
footer {
background: #e0f2f7;
position: absolute;
bottom: 0;
width: 100%;
}
答案 2 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Footer at bottom</title>
<style>
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 20px;
background-color: #efefef;
text-align: center;
}
</style>
</head>
<body>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</body>
</html>
这是你可以始终将页脚保持在页面底部的方式
答案 3 :(得分：0)
您可以使用nav元素上的“navbar-fixed-bottom”类来执行此操作。试试这个例子。要了解其工作原理，您可以查看此页面 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Fixed Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
body{
padding-bottom: 70px;
}
</style>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Brand</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<p style="line-height: 100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Tibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed.</p>
</div>
</body>
</html>