我遇到了一个问题，我似乎无法将 div 一直延伸到底部。我在 stackoverflow 上查看了这里，发现了一些关于它的主题并尝试了它，但它不能 100% 工作，它也总是会创建一个滚动条。
我正在为我的项目使用 Twitter Bootstrap。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Divespotter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">DIVESPOTTER</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">ONTDEK</a></li>
<li><a href="#about">GALLERIJ</a></li>
<li><a href="#contact">FORUM</a></li>
<li><a href="#contact">BLOG</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="maincontent">
<div class="container">
<div class="row">
<div class="span6">
<p class="title">Hét digitaal logboekje.</p>
<p class="intro">Het logboek is een belangrijk onderdeel voor dé beste duikervaring. Divespotter helpt u deze ervaringen nooit meer zal vergeten.</p>
<p class="register"><a href="#" >REGISTREER NU!</a></p>
</div>
<div class="span6">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="img/afb1.jpg"/>
<div class="carousel-caption">
Eerste afbeelding
</div>
</div>
<div class="item">
<img src="img/afb2.jpg"/>
<div class="carousel-caption">
Tweede afbeelding
</div>
</div>
<div class="item">
<img src="img/afb3.jpg"/>
<div class="carousel-caption">
Derde afbeelding
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="span4">
<p>Log</p>
<p>Leg al je duikervaringen vast zodat je er later terug van kan genieten precies of je erbij bent.</p>
</div>
<div class="span4">
<p>Ontdek</p>
<p>Ontdek nieuwe duiklocaties, leer van mededuikgenoten en bekijk foto’s van andere duikers over de hele wereld.</p>
</div>
<div class="span4">
<p>Deel</p>
<p>Deel al je duikervaringen en foto’s met je vrienden op Facebook, Twitter, ...</p>
</div>
</div>
</div></div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>
在 style.css 中：
html, body { height: 100%;}
body
{
font-family: 'Montserrat';
font-weight: bold;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.navbar .brand {
color: #232222;
font-size: 25px;
margin-right: 20%;
}
.navbar-inverse .navbar-inner {
border: 0;
box-shadow: none;
}
.navbar-inverse .brand {
color: #232323;
}
.navbar-inverse .nav > li > a{
color: #232323;
font-size: 15px;
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
.maincontent {
width: 100%;
background-color: #6eb3d2;
.container {
padding-top: 2%;
}
}
.title {
padding-top: 5%;
color: #313131; /* text color + color overlay */
font-family: "Montserrat";
font-size: 41px;
font-weight: bold;
}
.intro {
width: 70%;
padding-top: 5%;
color: #232222; /* text color + color overlay */
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: normal;
}
.footer {
background-color: #232323;
height: 100%;
width:100%;
p {
color: #fff;
}
}
.register {
margin-top: 6%;
a {
padding: 10px;
color: #f6f6f6; // text color + color overlay
font-family: "Montserrat";
font-size: 16px;
font-weight: bold;
width: 242px;
height: 61px;
background-color: #1f7f5b; /* layer fill content + color overlay */
}
a:hover {
text-decoration: none;
background-color: #232323;
}
}
编辑：我想要 .footer 垂直扩展的 Jsfiddle：http: //jsfiddle.net/MckJB/