我试图做以下布局：
+-------------------------------------------------+ | Header + search (Twitter navbar) | +------------+------------------------------------+ | | | | | | |Navigation | Content column | | | | | | | | | | | | | | | | | | | +------------+------------------------------------+ | Footer | +-------------------------------------------------+
布局必须采取所有可用的高度&宽度，导航和内容列占用所有可用空间和滚动上溢，页脚应该坚持到底部。
HTML现在看起来像这样：
<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/app.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="navbar">
<!-- navbar content -->
</div>
<div class="row-fluid columns">
<div class="span2 article-tree">
<!-- navigation column -->
</div>
<div class="span10 content-area">
<!-- content column -->
</div>
</div>
<div class="footer">
<!-- footer content -->
</div>
</div>
</body>
</html>
CSS：
body,html,.container-fluid { /// take all available height
height: 100%;
}
.article-tree {
color: #DCE6E5;
background: #2F323B;
}
.content-area {
overflow: auto;
height: 100%; /// explicit height to make scrolling work
}
.columns {
height: 100%; /// columns should take all height
margin-top: 42px; /// minus header
margin-bottom: 20px; // minus footer
}
.columns > div {
height: 100%; // make each column to take all available height
}
.footer {
background: red;
height: 20px;
}
在理论上它应该工作，但columns.margin不工作，我所期望的。我认为应该使height = 100％ – magin，但它只是移动容器。
我已经google和看到很多问题StackOverflow。所有这些都包括JavaScript或位置：绝对和手动定位。 IMHO他们比解决方案更多的黑客，我认为应该有一些更简单，更优雅和跨浏览器的方式来解决这个问题。
那么如何做上述的布局呢？也许Bootstrap可以帮助我(我看过文档，但没有提到像这样的情况)？
解决方法
我在Stackoverflow找到了一个职位，并实现您的设计：
这是原来的帖子：http://stackoverflow.com/a/5768262/1368423
这是你要找的？
HTML：
<div class="container-fluid wrapper">
<div class="row-fluid columns content">
<div class="span2 article-tree">
navigation column
</div>
<div class="span10 content-area">
content column
</div>
</div>
<div class="footer">
footer content
</div>
</div>
CSS：
html,body {
height: 100%;
}
.container-fluid {
margin: 0 auto;
height: 100%;
padding: 20px 0;
-moz-Box-sizing: border-Box;
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
}
.columns {
background-color: #C9E6FF;
height: 100%;
}
.content-area,.article-tree{
background: #bada55;
overflow:auto;
height: 100%;
}
.footer {
background: red;
height: 20px;
}
