尝试添加典型的bootstrap粘性页脚 - 但无法使其工作。我已经经历了很多次，并怀疑我犯了某种愚蠢的错误 - 但我无法找到它。我已经完成了对stackoverflow的大量搜索，无法使众多解决方案工作，我也不知道为什么。我觉得我已经把包装里的所有东西都拿来了，而且我已经得到了推动。 div也是 - 但它仍然拒绝工作。
这是我的代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href="footerspecs.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
</style>
</head>
<body>
<div class="wrapper">
<div class = "navbarandwideimage"><!-- HERE STARTS IMAGE AND NAVBAR -->
<div style="background-image: url(http://i.imgur.com/3w90pjv.jpg); position:absolute; left: 0%; width:100%; top:7%; bottom: 7%;">
<div class = "turnips2" style="position:absolute; bottom:15%; left:5%; right:70%; color=white;">This summer, five adventurers from Inverness and one Northern Irishman completed the first unsupported hike across Iceland from the south to the north - a distance of 400 miles across <b>Europe's last wilderness.</b>
</div>
</div>
<div class="navbar"
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-justified navbar-nav">
<li><a href="Home.html"><h2>Home</h2></a></li>
<li><a href="team.html"><h2>Team</h2></a></li>
<li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
<li><a href="Blog.html"><h2>Blog</h2></a></li>
<li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<style>
text-align:justify;
</style>
</div> <!-- HERE ENDSIMAGE AND NAVBAR -->
<!-- HERE STARTS MAIN BODY - PUT YOUR WORK HERE MAGS (in mainbody div)-->
<div class="mainbody" style="position: absolute; top:100%;" >
<div class="col-sm-12">
<h3> Krygyzstan - the land of horses </h3>
<p> lots <br> of <br> text <br> here </p>
</div>
</div>
<div id="push">
</div>
</div><!-- HERE ENDS MAIN BODY -->
<div class="footer"> <!-- FOOTER GOES HERE -->
<footer class="footer">
<div class="container">
<div class="socialmedia">
<a target="_blank" title="follow me on instagram" href="http://www.instagram.com/PLACEHOLDER">
<img alt="follow me on instagra" src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/logos_glyph/Oxi2BIzyfeN5INYU7lta/Glyph_Logo_thumbnail200.png" style=" width:3%; height:3%; border=50px;">
</div>
</a>
</div>
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</div> <!-- HERE ENDS FOOTER -->
</body>
</html>
页脚CSS：
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.socialmedia {
border-style:solid;
border-spacing: 10px;
}
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
REST OF CSS：
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
ul.nav li a>h2 {
margin-top: 0;
margin-bottom: 0;
}
.navbar-nav > li > a, .navbar-brand {
padding-top:4px !important;
padding-bottom:0 !important;
height: 28px;
}
.navbar {
min-height:28px !important;
}
.navbar button {
position:absolute;
left:50px;
top:0px;
border-style:none;
border-radius:0px;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bolder;
}
.synopsis {
color:white;
text-align: center;
}
.teampics .row {
margin-top: 17%;
text-align:center;
}
h3 {
text-align:center;
}
.turnips2 {
border-radius: 10px;
font-size: 2.3ex;
text-align:justify;
padding:10px;
color:white;
border-style: solid;
}
答案 0 :(得分：0)
试试这个：
.footer {
position: fixed;
/*Your other styles go here...*/
}