我遇到了一个问题，我似乎无法将div一直延伸到底部。我在这里看了一下stackoverflow并找到了一些关于它的主题并尝试了它但它不能100％工作，它总是创建一个滚动条。
我正在使用Twitter Bootstrap为我的项目btw。
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;
}
}
答案 0 :(得分：1)
您需要哪些浏览器支持？
如果你没问题
您可以使用Flexbox轻松完成此操作。唯一的问题是它有点冗长，因为有三种语法可供选择。
首先删除任何边距并将html和body设置为100％的高度和宽度（Firefox需要设置宽度来修复元素无法正确展开的错误）：
html, body {
height: 100%;
width: 100%; /* needed to fix Firefox bug */
margin: 0;
}
接下来将主体设置为使用弹性框而不是常规框模型。 Safari，较旧的Chrome和Firefox使用旧语法。 IE10使用中间语法，Opera和现代Chrome使用新语法（后者带前缀）：
body {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
接下来，我们需要使元素垂直堆叠而不是水平堆叠。再次，使用各种语法。将这些添加到您的body选择器：
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
现在所有内容都将垂直布局，但所有元素都将默认使用。我们希望页眉和页脚不会拉伸，因此它们可以保持原样。但是，我们希望拉伸主要内容以填充可用空间，因此我们需要说元素是灵活的。在演示中我使用了一个文章元素，所以我做了以下内容：
article {
background-color: #6EB3D2;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
值1意味着占用一个单位的空间。由于没有其他项目是灵活的，这就是所有空间。如果所有三个元素都使用1，则可用空间将被平均细分并添加到元素的默认大小。
最终结果应如下所示：http://jsfiddle.net/Kf9TL/（或http://jsfiddle.net/Kf9TL/show作为整页预览）。
这是你想要的吗？