html - Bootstrap 3 两列全高

Question

我正在尝试使用 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类来实现它？

score 223 · Accepted Answer

编辑： 在Bootstrap 4中，原生类可以生成全高列（DEMO），因为它们将网格系统更改为 flexbox。（继续阅读 Bootstrap 3）

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

Bootply 演示/ 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 属性）和中等屏幕宽度及以上的比例为 1:3（导航：内容）- （由于引导程序的默认类：col-md -3 和 col-md-9)

注意：

1）为了不弄乱引导程序的本机列类，我们no-float在标记中添加了另一个类，并且只在这个类上设置display:table-cell和float:none（与列类本身相对）。

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

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

Codepen 演示

现在，对于较小的屏幕，这些列将表现得像默认引导列（每个都得到全宽）。

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

Codepen 演示

score 70 · Accepted Answer

你可以用这个技巧实现你想要的padding-bottom: 100%; margin-bottom: -100%;，你可以在这个小提琴中看到。

我稍微更改了您的 HTML，但是您可以使用以下代码使用自己的 HTML 实现相同的结果

.col-md-9 {
    overflow: hidden;
}

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

score 37 · Accepted Answer

纯 CSS 解决方案

工作小提琴

仅使用 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），并HeightTaker在末尾使用明确的规则（使用:after）给出一个空元素。该元素不能与浮动元素在同一行，所以他被推到最后。这正是文档的 100%。

这样，我们将HeightTaker跨度设置为容器高度的其余部分，而没有说明任何特定的高度/边距。

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

更新

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

score 26 · Accepted Answer

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

.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>

score 10 · Accepted Answer

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

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

score 9 · Accepted Answer

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

使用 CSS 显示表格/表格单元格属性或使用实际表格。
在包装器内使用绝对定位元素。
使用 Flexbox 显示属性，但截至今天，它仍然有部分支持
使用仿柱技术模拟整个柱高。
使用填充/边距技术。见例子。

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

score 6 · Accepted Answer

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

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

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

祝你好运！

score 5 · Accepted Answer

解决方案可以通过两种方式实现

使用 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;
    }

score 4 · Accepted Answer

好的，我已经使用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;
}

score 3 · Accepted Answer

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

我举了两个例子。一个在<header> 里面 .container，一个在外面。

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

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

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

score 2 · Accepted Answer

如果您所关心的只是放下颜色，那么有一种更简单的方法可以做到这一点。

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

<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有一些限制，但是如果是针对页面的根结构，那就是最好的答案了。

score 1 · Accepted Answer

尝试

<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%;

}

供您参考，只需查看小提琴。

score 1 · Accepted Answer

尝试这个

 <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/

感谢赛义德

score 1 · Accepted Answer

我写了一个与 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;
}

score -1 · Accepted Answer

如果行后没有内容（取整个屏幕高度），使用position: fixed; height: 100%for.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>

score -2 · Accepted Answer

这里没有提到抵消。

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

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>

score -3 · Accepted Answer

你有没有在 JAvascript 的部分看到引导程序的afix ？？？

我认为这将是最好和最简单的解决方案老兄。

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

score -3 · Accepted Answer

在尝试了此处提供的代码后：Bootstrap 教程

这是使用最新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

希望这可以帮助任何感兴趣的人。

score -3 · Accepted Answer

尝试这个

<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 等......

html - Bootstrap 3 两列全高

HTML：

19 回答 19

标记：

（相关）CSS

Codepen 演示

Codepen 演示

纯 CSS 解决方案

更新

Related

Reference