Twitter Bootstrap 3 - 最大高度，自定义布局答案

【问题标题】：Twitter Bootstrap 3 - max height, custom layoutTwitter Bootstrap 3 - 最大高度，自定义布局
【发布时间】：2014-05-25 22:12:57
【问题描述】：

我有这样的事情：

+-------------------------------------------+
|             -- navigation --              |
+------+------------------------------------+
|      |                                    |
| left |                                    |
| side |                                    |
| with |                                    |
| affix|           -- content (white) --    |
| menu |                                    |
|-black|                                    |
|      |                                    |
|      |                                    |
|      +------------------------------------+
|      |           -- footer (white) --     |
+------+------------------------------------+

作为我在 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>

我想让我的左侧（黑色背景）和高度 = 100% 的浏览器窗口的内容（白色背景）和内容下方的页脚（白色背景）可见（也在滚动上）。

现在，我得到了边最后一个元素的高度。如果我的内容很短，它会在浏览器垂直边的中心结束。

这里是：http://codepen.io/anon/pen/FxImy

【问题讨论】：

伙计，试图通过解释来遵循所有这些真的很令人困惑 - 你能在 codepen.io 上扔一些代码并链接到它吗？
我很抱歉 :) 我忘记了。我编辑了我的问题，并在最后添加了链接。

标签： twitter-bootstrap layout twitter-bootstrap-3 css

【解决方案1】：

纯 CSS 解决方案（使用 calc）

如果你可以使用CSS3，并且这个50px的高度是静态的，你可以使用calc来实现你的布局。

这是DEMO

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

*
{
    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;
}

如果高度不是静态的，我有另一个解决方案给你，我演示 here 这不是你的布局，但可以用同样的方式完成。

【讨论】：

只是一个细节：“Fotter”应该是“Footer”... :-)

【解决方案2】：

看看这个例子对你有没有帮助：http://bootply.com/87811

它基本上将列包装在一个容器中，设置 100% 高度，并制作导航栏、侧边栏和页脚position:fixed

【讨论】：

但顶部导航和页脚应该是可滚动的。它无法修复:)

【解决方案3】：

您的问题似乎只是页脚？（或内容高度）。当您的内容太小时，jquery 设置页脚固定/粘滞 (http://getbootstrap.com/examples/sticky-footer/)。

类似：

来自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：

 if ($(window).height() > ($('#content').innerHeight() + $('#navigation').innerHeight() + $('#footer').innerHeight() ))
{
    $('#content').addClass('wrap');
    $('#footer').addClass('footerfixed');
}

他们似乎没有（或参见：stackoverflow.com/a/17582746/1596547）纯 CSS 解决方案来解决此问题，参见：Sticky header, sticky footer (variable height), fluid middle?

【讨论】：