Html Bootstrap - 在页眉和页脚之间填充流体容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15641142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Fill fluid container between header and footer
提问by fortune
This may be a very simple question, but I've been out of the CSS scene for awhile and I can't seem to figure it out. I am using the Bootstrap framework and I have a fixed header and footer. The container in between includes a navbar and content area. I would like that container to fill the entire space (100% height) in between the header and footer.
这可能是一个非常简单的问题，但我已经离开 CSS 领域有一段时间了，我似乎无法弄清楚。我正在使用 Bootstrap 框架，并且我有一个固定的页眉和页脚。中间的容器包括导航栏和内容区域。我希望该容器填充页眉和页脚之间的整个空间（100% 高度）。
Here is jsFiddle of the project: http://jsfiddle.net/NyXkt/2/
这是项目的jsFiddle：http: //jsfiddle.net/NyXkt/2/
This is the current html structure:
这是当前的 html 结构：
<div id="wrapper">
<!-- Header -->
<div class="container-fluid no-padding header">
<div class="row-fluid fill-height">
<!-- Header Left -->
<div class="span2">
<p class="center-text">Left</p>
</div>
<!-- Header Middle -->
<div class="span8">
<p class="center-text">Middle</p>
</div>
<!-- Header Right -->
<div class="span2">
<p class="center-text">Right</p>
</div>
</div>
</div>
<!-- Content Wrapper -->
<div class="container-fluid no-padding fill">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed no-padding">
<ul id="nav">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub-Item 1 a</a>
</li>
<li><a href="#">Sub-Item 1 b</a>
</li>
<li><a href="#">Sub-Item 1 c</a>
</li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub-Item 2 a</a>
</li>
<li><a href="#">Sub-Item 2 b</a>
</li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Sub-Item 3 a</a>
</li>
<li><a href="#">Sub-Item 3 b</a>
</li>
<li><a href="#">Sub-Item 3 c</a>
</li>
<li><a href="#">Sub-Item 3 d</a>
</li>
</ul>
</li>
<li><a href="#">Item 4</a>
<ul>
<li><a href="#">Sub-Item 4 a</a>
</li>
<li><a href="#">Sub-Item 4 b</a>
</li>
<li><a href="#">Sub-Item 4 c</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="span10">
<p class="center-text">Content</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container-fluid">
<p class="center-text">Footer</p>
</div>
</div>
If anyone could explain what I may need to do, or point me to an example, I'd appreciate it.
如果有人能解释我可能需要做什么，或者给我举个例子，我会很感激的。
回答by Zim
Bootstrap 4 (update 2019)
Bootstrap 4（2019 年更新）
Now it's easier to get this layout using flexbox.
现在使用 flexbox 更容易获得这种布局。
<body class="d-flex flex-column">
<header>
</header>
<main class="container-fluid flex-fill">
</main>
<footer>
</footer>
</body>
body {
min-height:100vh;
}
.flex-fill {
flex:1 1 auto;
}
Note:The flex-fillutility class will be included in the next Bootstrap 4.1release. So after that release the extra CSS for flex-fillwon't be needed.
注：该flex-fill实用程序类将被列入下一个引导程序4.1版本。所以在那之后发布额外的 CSS forflex-fill将不再需要。
Bootstrap 2 (original 2013 answer)
Bootstrap 2（原始 2013 答案）
Any parent containers also have to be 100% height (html,body and #wrapper). If you make #wrapper {height:100%} and add 'fill-height' to your container it should work. See here:
任何父容器也必须是 100% 高度（html、body 和 #wrapper）。如果您制作 #wrapper {height:100%} 并将“fill-height”添加到您的容器中，它应该可以工作。看这里：
http://jsfiddle.net/skelly/NyXkt/4/
http://jsfiddle.net/skelly/NyXkt/4/
#wrapper {
min-height: 100% !important;
height: 100% !important;
margin: 0 auto -33px;
}
