我有一个正在构建的站点，但遇到了困难。该网站使用 Bootstrap ，无论是否有内容，我都无法让页脚停留在页面底部。 我不希望它留在视口(viewport)中，我希望它位于内容的末尾。这是我正在学习的教程，但它不起作用:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
现在页脚卡在内容的中间。
我有一个理论认为 #container id 没有涵盖所有 #body内容。当我检查元素时，它看起来像 #container在 <div class = "jumbotron home"></div> 之后停止和 <h1>oot</h1>元素。我不确定这是为什么，或者即使我是对的。
你可以在这里看到:https://oot-janaaron97.c9users.io
代码如下:
样式.css
/*
Theme Name: Oot
Author: Deep Space Development Team
Version: 1.0
*/
/******************************************************************************************
GENERIC STYLES
******************************************************************************************/
body{
background: #fdfdfd;
}
a{
color: black;
text-decoration: none;
}
.jumbotron{
margin: 0 !important;
}
/******************************************************************************************
HEADER
******************************************************************************************/
.navbar-default{
}
.navbar-nav{
float: right !important;
}
.navbar-brand{
color: #333 !important;
}
#logo{
width: auto;
height: 30px;
margin-top: -5px;
}
/******************************************************************************************
FOOTER
******************************************************************************************/
#footer{
background: deepskyblue;
}
#footer p, #footer a{
margin-top: 1.6em;
color: #fff;
}
/******************************************************************************************
HOME
******************************************************************************************/
.home{
background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://images.unsplash.com/photo-1457213453084-d386450c6252?crop=entropy&dpr=2&fit=crop&fm=jpg&h=700&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1300);
background-size: cover;
background-position: center;
height: 40em;
}
/******************************************************************************************
MISC.
******************************************************************************************/
.center{
text-align: center;
}
.text-wrap{
word-wrap: break-word;
}
/******************************************************************************************************
CODE TO KEEP FOOTER ON BOTTOM
******************************************************************************************************/
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#body {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
/******************************************************************************************
MEDIA-QUERY
******************************************************************************************/
@media (max-width: 768px) {
.nav li a{
margin-left: 15px;
}
.navbar-nav{
float: none !important;
}
.navbar-nav li{
width: 100%;
text-align: center;
}
}
header.php
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Bootstrap-->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Custom css file -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<title>Oot</title>
</head>
<body>
<div id = "container">
<div id = "header">
<?php include 'menu.php'; ?>
</div><!--end of #header-->
<div id = "body">
page-home.php
<?php get_header();?>
<div class = "jumbotron home"></div>
<h1 class = "center text-wrap">Oot</h1>
<div class = "col-md-4">
<p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p>
</div>
<div class = "col-md-4">
<p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p>
</div>
<div class = "col-md-4">
<p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p>
</div>
</div>
<?php get_footer();?>
footer.php
<div id = "footer">
<div class = "col-md-4">
<h1>TEST</h1>
<p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p>
</div>
<div class = "col-md-4">
<h1>TEST</h1>
<p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p>
</div>
<div class = "col-md-4">
<h1>TEST</h1>
<p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p>
</div>
</div>
</div>
</body>
</html>
谢谢!
最佳答案
尝试将您的#footer css 更改为以下内容:
#footer {
background: #ffab62;
width: 100%;
height: 100%;
/* position: absolute; - remove this*/
/* bottom: 0; - remove this*/
/* left: 0; - remove this*/
}
页脚将自然地位于您的 <body> 的任何位置内容结束
===
更新的答案
尝试将 clearfix 的类添加到正文中
<div id="body" class="clearfix">
关于html - 将页脚推到页面底部( Bootstrap )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36578107/