CSS Twitter Bootstrap 3 - 最大高度，自定义布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19593076/
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
Twitter Bootstrap 3 - max height, custom layout
提问by mrzepinski
I have something like this:
我有这样的事情：
+-------------------------------------------+
| -- navigation -- |
+------+------------------------------------+
| | |
| left | |
| side | |
| with | |
| affix| -- content (white) -- |
| menu | |
|-black| |
| | |
| | |
| +------------------------------------+
| | -- footer (white) -- |
+------+------------------------------------+
as my layout in TB 3.0, and some code:
作为我在 TB 3.0 中的布局，以及一些代码：
<body>
<header>
<div class="row">
<div class="col-md-12>-- navigation (height = 50px) here --</div>
</div>
</header>
<div class="row">
<div class="col-md-4">-- left side with black background here --</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">-- content with white background here --</div>
</div>
<div class="row">
<div class="col-md-12">-- footer (height = 50px) with white background here --</div>
</div>
</div>
</div>
</body>
I want make my left side (with black background) and content (white background) with height = 100% of my browser window and footer (white background) below my content to be visible (also on scroll).
我想让我的左侧（黑色背景）和高度 = 100% 的浏览器窗口和页脚（白色背景）在我的内容下方可见（也在滚动上）。
For now, I get height of last element of the side. If my content is short, it ends for example in the center of vertical side of my browser.
现在，我得到了侧面最后一个元素的高度。如果我的内容很短，例如它会在浏览器垂直边的中心结束。
Here is it: http://codepen.io/anon/pen/FxImy
回答by avrahamcool
Pure CSS Solution (using calc)
纯 CSS 解决方案（使用 calc）
If you can use CSS3, and this 50pxheight is static, you can use calcto achieve your layout.
如果你可以使用 CSS3，并且这个50px高度是静态的，你可以用它calc来实现你的布局。
Here's a DEMO
这是一个演示
HTML
HTML
<header>
Header
</header>
<div id="Container">
<div id="Left">I'm in the left menu</div>
<div id="Right">
<div id="Content">Content</div>
<footer>Footer</footer>
</div>
</div>
CSS
CSS
*
{
padding: 0;
margin: 0;
}
html, body
{
height: 100%;
}
header, footer
{
height: 50px;
background-color: yellow;
text-align: center;
}
#Container, #Content
{
height: calc(100% - 50px);
overflow: auto;
}
#Left, #Right
{
height: 100%;
}
#Left
{
float: left;
background-color: black;
color: white;
}
#Right
{
overflow: auto;
}
If the height is not static, I have another solution for you, that I demonstrate hereit's not excatly your layout, but it can be done the same way.
如果高度不是静态的，我为您提供了另一种解决方案，我在这里演示的不是您的布局，但可以以相同的方式完成。
回答by Zim
See if this example helps you out: http://bootply.com/87811
看看这个例子是否对你有帮助：http: //bootply.com/87811
It basically wraps the columns in a container, sets 100% height, and makes the navbar, sidebar and footer position:fixed
它基本上将列包装在容器中，设置 100% 高度，并制作导航栏、侧边栏和页脚 position:fixed
回答by Bass Jobsen
Your problem seems the footer only? (or content height). Set the footer fixed / sticky (http://getbootstrap.com/examples/sticky-footer/) when your content is too small by jquery.
你的问题似乎只有页脚？（或内容高度）。当 jquery 的内容太小时，将页脚设置为固定/粘性（http://getbootstrap.com/examples/sticky-footer/）。
something like:
就像是：
css from http://getbootstrap.com/examples/sticky-footer/sticky-footer.css:
来自http://getbootstrap.com/examples/sticky-footer/sticky-footer.css 的css ：
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
.footerfixed {
height: 60px;
background-color: #f5f5f5;
}
javascript:
javascript:
if ($(window).height() > ($('#content').innerHeight() + $('#navigation').innerHeight() + $('#footer').innerHeight() ))
{
$('#content').addClass('wrap');
$('#footer').addClass('footerfixed');
}
Their seems no (or see: stackoverflow.com/a/17582746/1596547) pure CSS solution to fix this, see: Sticky header, sticky footer (variable height), fluid middle?
他们似乎没有（或参见：stackoverflow.com/a/17582746/1596547）解决此问题的纯 CSS 解决方案，请参阅：粘性页眉、粘性页脚（可变高度）、流体中间？
