我正在尝试使用Twitter bootstrap 3进行双列全高布局。似乎 twitter bootstrap 3 不支持全高度布局。 我想做什么：
+-------------------------------------------------+
| Header |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
如果内容增长，导航也应该增长。
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 类进行制作？
答案 0 :(得分：206)
修改 在Bootstrap 4中，本机类可以生成全高列（DEMO），因为它们将their grid system更改为flexbox。 （阅读Bootstrap 3）
<小时/> 本机Bootstrap 3.0类不支持您描述的布局，但是，我们可以集成一些使用css tables来实现此目的的自定义CSS。
<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>
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 （导航：内容） 中等屏幕宽度及以上 - （由于bootstrap的默认类：col-md-3和col-md-9）
NB：
1）为了不搞乱bootstrap的原生列类，我们在标记中添加了另一个类no-float，并且只设置了display:table-cell和float:none这个类（与列类本身相关）。
2）如果我们只想将css-table代码用于特定断点（比如中等屏幕宽度以上），但对于移动屏幕，我们希望默认返回到通常的bootstrap我们可以将自定义CSS包装在媒体查询中，比如说：
@media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}
现在，对于较小的屏幕，列的行为类似于默认的bootstrap列（每个列都有全宽）。
3）如果所有屏幕宽度都需要1：3的比例 - 那么从标记中删除bootstrap的col-md- *类可能更好，因为这不是它们的意思使用。
答案 1 :(得分：66)
你可以使用padding-bottom: 100%; margin-bottom: -100%;技巧达到你想要的效果，你可以在this小提琴中看到。
我稍微更改了您的HTML，但您可以使用以下代码使用自己的HTML获得相同的结果
.col-md-9 {
overflow: hidden;
}
.col-md-3 {
padding-bottom: 100%;
margin-bottom: -100%;
}
答案 2 :(得分：38)
仅使用CSS2.1，使用所有浏览器（IE8 +），，不指定任何高度或宽度。
这意味着如果您的标题突然变长，或者您的左侧导航需要放大，则无需在CSS中修复任何。
完全响应，简单＆amp;清晰，易于管理。
<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％高度，并且他被分成两部分。
标题部分将跨越其所需的高度，HeightTaker将采用其余部分。
它是如何实现的？通过在容器旁边以100％高度（使用:before）浮动一个空元素，并使用明文规则（使用HeightTaker）给最后一个空元素:after。那个元素与浮动元素不在同一条线上，所以他被推到了最后。这正是文件的100％。
我们使HeightTaker跨越容器高度的其余部分，而不说明任何特定的高度/边距。
在HeightTaker内部，我们构建了一个正常的浮动布局（以实现类似于显示的列）并进行了微小的更改..我们有一个Wrapper元素，这是100%所需要的工作的高度。
Here's使用Bootstrap类进行演示。 （我刚给你的布局添加了一个div）
答案 3 :(得分：24)
我想到了一个微妙的变化，它不会改变默认的引导行为。 我只有在需要它时才能使用它：
.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>
答案 4 :(得分：8)
据我所知，您最多可以使用5种方法来完成此任务：
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;
}
答案 5 :(得分：6)
纯CSS解决方案很简单，它就像魅力十字浏览器一样。
您只需在nav和content列中添加一个较大的填充和一个同样大的负边距，然后将其行包装在隐藏溢出的类中。
Live view
Edit 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;
}
答案 6 :(得分：5)
解决方案可以通过两种方式实现
引导程序3中未提供用于获得上述解决方案的类。 display：table和display：table-cell，但仅限于在HTML中使用表格时。 负边距和填充类也不存在。
因此我们必须使用自定义css来实现这一目标。
以下是第一个解决方案
HTML code：
<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 code：
<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;
}
答案 7 :(得分：4)
好的，我使用 Bootstrap 3.0
实现了同样的目标最新引导程序的示例
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;
}
答案 8 :(得分：3)
所以看来你的最佳选择是padding-bottom采取消极margin-bottom策略的反击。
我做了两个例子。一个使用<header> inside .container，另一个使用 outside 。
两个版本都应该正常运行。请注意使用以下@media查询，以便在较小的屏幕上删除额外的填充...
@media screen and (max-width:991px) {
.content { padding-top:0; }
}
除此之外，这些示例应该可以解决您的问题。
答案 9 :(得分：2)
将此标记放在身体标记中的第一个或最后一个
<div id="nfc" class="col col-md-2"></div>
这是你的css
#nfc{
background: red;
top: 0;
left: 0;
bottom: 0;
position: fixed;
z-index: -99;
}
您只是创建一个形状，将其固定在页面后面并将其拉伸到最大高度。通过使用现有的bootstrap类，您将获得正确的宽度，并且它将保持响应。
这种方法有一些限制，但如果它是页面的根结构，那么它就是最好的答案。
答案 10 :(得分：2)
我写了一个与Bootstrap兼容的简单CSS来创建完整的宽度和高度表：
小提琴： https://jsfiddle.net/uasbfc5e/4/
原则是：
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;
}
答案 11 :(得分：2)
现代且非常简单的解决方案：
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;
}
答案 12 :(得分：1)
试试这个
<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/
感谢Syed
答案 13 :(得分：1)
试
<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.
答案 14 :(得分：-1)
如果行后面没有内容（采用整个屏幕高度），使用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>
答案 15 :(得分：-2)
这里没有提到抵消。
您可以使用绝对位置左侧边栏。
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>
答案 16 :(得分：-3)
您是否在JAvascript的部分中看到过bootstrap的 afix ???
我认为这将是最好的＆amp;最简单的解决方案。
答案 17 :(得分：-3)
试试这个
<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等......
答案 18 :(得分：-3)
在尝试使用此处提供的代码后：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
希望这有助于任何有兴趣的人。