Bootstrap 3 两列全高

Posted 2023-03-05

技术标签:

【中文标题】Bootstrap 3 两列全高【英文标题】：Bootstrap 3 two columns full height 【发布时间】：2013-10-06 00:44:26 【问题描述】：

我正在尝试使用 Twitter Bootstrap 3 制作两列全高布局。Twitter Bootstrap 3 似乎不支持全高布局。我想做什么：

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

如果内容增长，nav 也应该增长。

每个父级的高度 100% 不起作用，因为存在内容为一行的情况。 position: absolute 好像走错路了。 display: table 和 display: table-cell 解决了问题，但并不优雅。

html：

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

有没有办法使用默认的 Twitter Bootstrap 3 类？

【问题讨论】：

导航+内容元素是否必须覆盖剩余的视口（屏幕）高度？是的。仅用于清除：标题 + 内容 = 视口的 100%，如果内容高度我不明白，难道你不能只给 .row 提供背景并让 col-md-9 覆盖该部分，反之亦然吗？给行高度 100% 给导航高度 100% 并让 col-md-9 动态增长怎么样？ 【参考方案1】：

编辑： 在Bootstrap 4 中，原生类可以生成全高列 (DEMO)，因为它们将 their grid system 更改为 flexbox。（继续阅读 Bootstrap 3）

本机 Bootstrap 3.0 类不支持您描述的布局，但是，我们可以集成一些使用 css tables 的自定义 CSS 来实现这一点。

Bootply demo / Codepen

标记：

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

（相关）CSS

html,body,.container 
    height:100%;

.container 
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;


.row 
    height: 100%;
    display: table-row;


.row .no-float 
  display: table-cell;
  float: none;

上面的代码将实现全高列（由于我们添加的自定义 css-table 属性）和 ratio 1:3（导航：内容）对于中等屏幕宽度及以上 - （由于引导程序的默认类：col-md-3 和 col-md-9）

注意：

1) 为了不弄乱 bootstrap 的原生列类，我们在标记中添加了另一个类，如 no-float，并且只在该类上设置了 display:table-cell 和 float:none（与列类本身）。

2) 如果我们只想将 css-table 代码用于特定断点（比如中等屏幕宽度及以上），但对于移动屏幕，我们希望默认返回到通常的引导程序行为比我们可以将自定义 CSS 包装在媒体查询中，比如：

@media (min-width: 992px) 
  .row .no-float 
      display: table-cell;
      float: none;

Codepen demo

现在，对于较小的屏幕，这些列的行为类似于默认的引导列（每个都获得全宽）。

3) 如果所有屏幕宽度都需要 1:3 比例 - 那么从标记中删除引导程序的 col-md-* 类可能会更好，因为这不是它们的本意使用。

Codepen demo

【讨论】：

嗯。这不是我真正想要的，可能有原生引导 3 类的解决方案吗？还是谢谢！添加浮点数后对我有用：无；到列，但在 js 上没有必要。为什么？更新：@media - 原因 @Zubzob - 我更新了我的答案和引导。通过向原生类 col-md-3 和 col-md-9 添加一个额外的类 - 我们可以确保这不会弄乱其他代码。所以答案是：“不，你不能用开箱即用的引导类来做到这一点”？ @Meglio 请阅读我编辑的答案 - 感谢您指出这一点【参考方案2】：

您可以使用padding-bottom: 100%; margin-bottom: -100%; 技巧实现您想要的，您可以在this fiddle 中看到。

我稍微改变了你的 HTML，但是你可以用你自己的 HTML 用下面的代码来达到同样的效果

.col-md-9 
    overflow: hidden;


.col-md-3 
    padding-bottom: 100%;
    margin-bottom: -100%;

【讨论】：

好的。我会更新问题。我有动态页面（col-md-9 可以增长），所以，你的变体不应该工作，但我会测试它。谢谢不是我的意思。我想要全高列，以防 col-md-9 有一行文本高度都一样应该是 100% - 标题高度或简单的 100%。我试过这个技巧，只有像 10000px，-10000px 这样的值。不过谢谢你的回答。我的列很高，所以我不得不修改 padding-bottom: 10000%;保证金底部：-10000%；它成功了。否则我猜 100% 与页面高度有关对于尝试此解决方案的其他人，溢出：隐藏需要应用于父行，而不是非侧边栏列才能跨浏览器工作。它在小提琴中是正确的，但在上面的解释中是不正确的。【参考方案3】：

纯 CSS 解决方案

Working Fiddle

仅使用 CSS2.1，适用于所有浏览器 (IE8+)，无需指定任何高度或宽度。

这意味着如果您的标题突然变长，或者您的左侧导航需要放大，您无需在 CSS 中修复任何内容。

完全响应、简单明了且非常易于管理。

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

解释： 容器div 占身体高度的 100%，他被分成 2 个部分。标题部分将跨越到所需的高度，HeightTaker 将占据其余部分。它是如何实现的？通过以 100% 的高度沿容器浮动一个空元素（使用 :before），并在末尾使用 clear 规则给 HeightTaker 一个空元素（使用 :after）。该元素不能与浮动元素在同一行，所以他被推到最后。这正是文档的 100%。

我们使HeightTaker 跨越容器高度的其余部分，而不说明任何特定的高度/边距。

在 HeightTaker 内部，我们构建了一个普通的浮动布局（以实现类似于显示的列），并进行了微小的更改。我们有一个 Wrapper 元素，这是 100% 高度工作所必需的。

更新

Here's 带有 Bootstrap 类的演示。（我刚刚在您的布局中添加了一个 div）

【讨论】：

是的，它是最美丽的解决方案。你能把它用于引导类吗？请解释一下它是如何工作的。目前最适合批准我不知道引导程序..对不起。但它很容易使用..你可以自己做。我将添加对其工作原理的解释。 @baxxabit 我添加了一个解释。如果您需要更多信息，请告诉我。如果您调整窗口大小，它将无法正确显示在屏幕上。【参考方案4】：

我想到了一个微妙的变化，它不会改变默认的引导行为。而且我只能在需要时使用它：

.table-container 
  display: table;


.table-container .table-row 
  height: 100%;
  display: table-row;


.table-container .table-row .table-col 
  display: table-cell;
  float: none;
  vertical-align: top;

所以我可以这样使用它：

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

【讨论】：

为我工作得很好（使用引导程序 3）我无法让上述解决方案之一起作用，垂直对齐对我来说是关键。【参考方案5】：

现代且非常简单的解决方案：

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

CSS：

.row 
    display: flex;

【讨论】：

行仍然是 0px 高【参考方案6】：

据我所知，您最多可以使用 5 种方法来完成此操作：

使用 CSS 显示表格/表格单元格属性或使用实际表格。在包装器内使用绝对定位元素。使用 Flexbox 显示属性，但截至今天，它仍然有 partial support 使用faux column technique 模拟整个柱高。使用填充/边距技术。 See example.

Bootstrap：我没有太多经验，但我认为他们没有为此提供样式。

.row

    overflow: hidden;
    height: 100%;

.row .col-md-3,
.row .col-md-9 

    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;

.row .col-md-3 p,
.row .col-md-9 p 

    margin-bottom: 30px;

.col-md-3

    background: pink;
    left:0;
    width:25%

.col-md-9

    width: 75%;
    background: yellow;

【讨论】：

谢谢@Oriol。你真棒。几点：1），2）是的，但不是我想要的 3）这是一个解决方案，但仅适用于现代 ff 和 chrome。 safari 支持旧版本的 flexbox 4) 不是引导类 5) 右列可以增长。所以溢出：隐藏将裁剪重要的行。这不酷:) 我会试试你的代码【参考方案7】：

纯 CSS 解决方案很简单，它就像一个魅力跨浏览器。

您只需为导航和内容列添加一个大的填充和同样大的负边距，然后将它们的行包装在一个隐藏溢出的类中。Live viewEdit view

HTML

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

.col
margin-bottom: -99999px;
padding-bottom: 99999px;


.col-wrap
overflow: hidden;

祝你好运！

【讨论】：

很抱歉，但这看起来像是一个可怕的 hack，它不会为您提供将元素绝对定位在子容器底部的选项。如果您有底部边框半径或 div 背景中的某种视觉资产，则不是一个好的解决方案。【参考方案8】：

解决办法有两种方式

使用 display:table 和 display:table-cell 使用内边距和负边距。

bootstrap 3 中没有提供用于获得上述解决方案的类。 display:table 和 display:table-cell 仅在使用 HTML 中的表格时给出。负边距和填充类也不存在。

因此我们必须使用自定义 css 来实现这一点。

下面是第一个解决方案

HTML 代码：

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

对应的css：

html,body,.container
        height:100%;
    
    .tablewrapper
        display:table;
        height:100%;
    
    .tablerowwrapper
        display:table-row;
    
    .sidebar,.content
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    
    .pad_top15
        padding-top:15px;

下面是第二种解决方案

HTML 代码：

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

对应的css：

html,body,.container
        height:100%;
    
    .sidebar,.content
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    
    .ovfhidden
        overflow:hidden;
    
    .pad_top15
        padding-top:15px;
    
    .bord_bot
        border-bottom: 1px solid black;

【讨论】：

列没有 100% 的视口高度抱歉忘记了基本样式 html,body,container height:100%; 将此样式添加到第一个解决方案中右列可以增长，所以 overflow:hidden for row 可以裁剪一些内容，如果它需要超过视口的高度。删除溢出：从行中隐藏。有隐藏内容jsfiddle.net/gMPXG/7/embedded/result 那有什么问题？？【参考方案9】：

好的，我已经使用 Bootstrap 3.0

实现了同样的目标

最新引导程序示例

http://jsfiddle.net/HDNQS/1/

HTML：

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS：

html, body, .wrapper 
    padding: 0;
    margin: 0;
    height: 100%;


$headerHeight: 43px;

.navigation, .content 
    display: table-cell;
    float: none;
    vertical-align: top;


.wrapper 
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;


.header 
    height: $headerHeight;


.row 
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after 
        content: none;
    


.navigation 
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;

【讨论】：

是的，但它与批准的答案相同。谢谢是的，基本相同，但您需要添加一些小的“调整”（参见content:none 和其他小东西）。我想发布一个“插入式”替代品，我也可以复制意大利面 +1 用于添加“垂直对齐：顶部”。在我添加此内容之前，我的左栏一直卡在页面底部。【参考方案10】：

因此，您最好的选择似乎是采用padding-bottom 以否定margin-bottom 策略。

我做了两个例子。一个是<header> inside .container，另一个是outside。

两个版本都应该可以正常工作。请注意使用以下 @media 查询，以便在较小的屏幕上删除额外的填充...

@media screen and (max-width:991px) 
    .content  padding-top:0;

除此之外，这些示例应该可以解决您的问题。

【讨论】：

关于在小屏幕上移除额外填充的好方法 gio 对外部标题的小提琴竖起大拇指，这是唯一适合我的情况。【参考方案11】：

如果您所关心的只是涂上颜色，那么有一种更简单的方法。

把它放在你的body标签的第一个或最后一个

<div id="nfc" class="col col-md-2"></div>

这在你的 CSS 中

#nfc
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;

您只是在创建一个形状，将其固定在页面后面并将其拉伸到全高。通过利用现有的引导类，您将获得正确的宽度并保持响应。

这个方法ofc有一些限制，但是如果是针对页面的根结构，那就是最好的答案了。

【讨论】：

为什么你有position: absolute，然后是position: fixed？还不是最模糊的，错字:) 不错的解决方案。但是，我只能使用.container-fluid 让它正确排列。我想使用.container。想法？ .container 或 .container-fluid 与此无关。 .col.col-md-2 使用引导程序设置宽度。我上面的 CSS 将 div 强制为全高，并具有足够的负 z-index 以确保它位于所有内容的后面。如上所述，它应该是<body> 标签中的第一个或最后一个元素【参考方案12】：

试试

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

.fill 类的 css 在下面

 .fill
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;

.col-md-12

    background: red;



.col-md-4

    background: yellow;
    height:100%;
    min-height:100%;


.col-md-8

    background: green;
    height:100%;
    min-height:100%;

请查看fiddle.

【讨论】：

感谢您的回答，但我使用 twitter bootstrap 3，而不是 2。请阅读getbootstrap.com/getting-started/#migration bootstrap 3，没有使用 span，改为 col. 好的。列的高度将作为列中内容的高度，但我只能有一行。谢谢@Kooki3。只需将span 更改为col-md-，让我们看看

&lt;div class="container"&gt;     &lt;div class="row"&gt;         &lt;div class="col-md-12"&gt;header section&lt;/div&gt;      &lt;/div&gt;      &lt;div class="row"&gt;         &lt;div class="col-md-4"&gt;Navigation&lt;/div&gt;         &lt;div class="col-md-8"&gt;Content&lt;/div&gt;      &lt;/div&gt; &lt;/div&gt;

会发生什么不起作用。你看我的评论了吗？ jsfiddle.net/YQUQd/1/embedded/result【参考方案13】：

试试这个

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

访问http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

感谢赛义德

【讨论】：

谢谢，你能把你的例子改成 bootstrap 3.0 吗？【参考方案14】：

我写了一个与 Bootstrap 兼容的简单 CSS 来创建完整的宽度和高度表：

小提琴： https://jsfiddle.net/uasbfc5e/4/

原理是：

在主 DIV 上添加“tablefull” 然后隐式地，下面的 DIV 将创建行然后行下方的 DIV 将是单元格您可以将“tableheader”类用于标题或类似内容

HTML：

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

CSS：

div.tablefull 
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;


div.tablefull>div.tableheader, div.tablefull>div.tableheader>div
    height: 0%;


div.tablefull>div 
    display: table-row;


div.tablefull>div>div 
    display: table-cell;
    height: 100%;
    padding: 0;

【讨论】：

当心 CSS 缩小器，有时它们会将 0%; 更改为 0;，这是完全不同的。如果发生这种情况，您可以改用1%;。【参考方案15】：

如果行后没有内容（取整个屏幕高度），使用position: fixed; height: 100% 替换.col:before 元素的技巧可能会很好：

header 
  background: green;
  height: 50px;

.col-xs-3 
  background: pink;

.col-xs-3:before 
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */

.col-xs-9 
  background: yellow;

.col-xs-9:before 
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

【讨论】：

【参考方案16】：

这里没有提到偏移。

您可以使用绝对来定位左侧边栏。

CSS

.sidebar-fixed
  width: 16.66666667%;
  height: 100%;

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

【讨论】：

【参考方案17】：

试试这个

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

这使用 Bootstrap 3，所以不需要额外的 CSS 等...

【讨论】：

请提供小提琴这是一个来自 Bootstrap 网站的示例：getbootstrap.com/examples/offcanvas【参考方案18】：

你在 javascript 的部分看到 bootstrap 的 afix 了吗？？？

我认为这将是最好和最简单的解决方案，伙计。

看看那里：http://getbootstrap.com/javascript/#affix

【讨论】：

你能分享一下例子吗，我怎样才能用 afix 做两列？顺便说一句....你试过最小高度吗？也许它很有用，对吧？@baxxabit【参考方案19】：

试用此处提供的代码后：Bootstrap Tutorial

这是使用最新的Bootstrap v3.0.2 的另一种选择：

标记：

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

其他 CSS：

#maincontainer, #headcontainer 
width: 100%;


#headcontainer 
background-color:#CCCC99; 
height: 150px


#maincontainer .row .col-xs-4
background-color:gray; 
height:1000px


#maincontainer .row .col-xs-8
background-color:green;
height: 1000px

示例JSFiddle

希望这对感兴趣的人有所帮助。

【讨论】：

jsfiddle.net/zHRZr/7 关于动态高度的原始问题，但无论如何谢谢

以上是关于Bootstrap 3 两列全高的主要内容，如果未能解决你的问题，请参考以下文章

3 列全高 CSS 布局，带有用于 Web 应用程序的页眉和页脚

Bootstrap 全高背景封面图片

在 React 中使用时，Bootstrap 4 容器没有占据全高

align-items-center，同时保持背景全高

如何使用 Twitter Bootstrap v3.0 构建两列流体布局

BootStrap：行不能在一行包含两列