Bootstrap - 在页眉和页脚之间填充流体容器 [英] Bootstrap - Fill fluid container between header and footer
问题描述
这可能是一个非常简单的问题，但我已经离开CSS场景一段时间了，我似乎无法弄清楚。我正在使用Bootstrap框架，并且有一个固定的页眉和页脚。中间的容器包括一个导航栏和内容区域。我希望该容器可以填充页眉和页脚之间的整个空间（100％高度）。
这是项目的jsFiddle： http://jsfiddle.net/NyXkt/2/
是当前的html结构：
< div id =wrapper>
<！ - Header - >
< div class =container-fluid no-padding header>
< div class =row-fluid fill-height>
<！ - 标题左 - >
< div class =span2>
< p class =center-text>向左< / p>
< / div>
<！ - 标题中间 - >
< div class =span8>
< p class =center-text>中< / p>
< / div>
<！ - Header Right - >
< div class =span2>
< p class =center-text>右< / 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 =＃>第1项< / a>
< ul>
< li>< a href =＃>子项目1 a< / a>
< / li>
< li>< a href =＃>子项目1 b< / a>
< / li>
< li>< a href =＃>子项目1 c< / a>
< / li>
< / ul>
< / li>
< li>< a href =＃>第2项< / a>
< ul>
< li>< a href =＃>子项目2 a< / a>
< / li>
< li>< a href =＃>子项目2 b< / a>
< / li>
< / ul>
< / li>
< li>< a href =＃>第3项< / a>
< ul>
< li>< a href =＃>子项目3 a< / a>
< / li>
< li>< a href =＃>子项目3 b< / a>
< / li>
< li>< a href =＃>子项目3 c< / a>
< / li>
< li>< a href =＃>子项目3 d< / a>
< / li>
< / ul>
< / li>
< li>< a href =＃>第4项< / a>
< ul>
< li>< a href =＃>子项目4 a< / a>
< / li>
< li>< a href =＃>子项目4 b< / a>
< / li>
< li>< a href =＃>子项目4 c< / a>
< / li>
< / ul>
< / li>
< / ul>
< / div>
< / div>
< div class =span10>
< p class =center-text>内容< / p>
< / div>
< / div>
< / div>
< / div>
<！ - Footer - >
< div id =footer>
< div class =container-fluid>
< p class =center-text>页脚< / p>
< / div>
< / div>
如果有人能够解释我可能需要做的事情，或者指出一个例子，我会
Bootstrap 4（更新2018年）
$
< body class =d-flex flex现在使用flexbox可以更容易地获得这个布局。 -column>
< header>
< / header>
< main class =container-fluid flex-fill>
< / main>
< footer>
< / footer>
< / body>
body {
min-height：100vh;
}
.flex-fill {
flex：1 1 auto;
}
$ b
注意： flex-fill 实用程序类将在下一个Bootstrap 4.1 发行版中包含。因此，在发布之后，不需要为 flex-fill 添加额外的CSS。
Bootstrap 2（原始2013答案）
任何父容器也必须是100％ #wrapper指定）。如果您制作#wrapper {height：100％}并将填充高度添加到您的容器，它应该可以工作。看到这里：
http：// jsfiddle .net / skelly / NyXkt / 4 /
#wrapper {
最小高度：100％ ！重要;
身高：100％！重要;
margin：0 auto -33px;
}
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.
Here is jsFiddle of the project: http://jsfiddle.net/NyXkt/2/
This is the current html structure:
<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.
Bootstrap 4 (update 2018)
Now it's easier to get this layout using 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-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won't be needed.
Bootstrap 2 (original 2013 answer)
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:
http://jsfiddle.net/skelly/NyXkt/4/
#wrapper {
min-height: 100% !important;
height: 100% !important;
margin: 0 auto -33px;
}
这篇关于Bootstrap - 在页眉和页脚之间填充流体容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
