我试图用Twitter Bootstrap 3做一个两列全高布局。Twitter Bootstrap 3似乎不支持全高布局。
我想做的是:
+-------------------------------------------------+
| Header |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
如果内容增长，导航也应该增长。
高度100%为每个父级是行不通的，因为有些情况下内容是一行。
立场:绝对似乎是错误的方式。
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>
有办法使它与默认的推特引导3类?
解决方案可以通过两种方式实现
使用display:table和display:table-cell
使用填充和负边距。
用于获得上述解决方案的类在引导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;
}
一个纯粹的CSS解决方案是很简单的，它就像一个跨浏览器的魅力。
只需向nav列和content列添加一个较大的内边距和一个同样大的负边距，然后将它们的行包装到一个隐藏了溢出的类中。
实时视图
编辑视图
超文本标记语言
<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;
}
好运！
在尝试了这里提供的代码后:引导教程
下面是另一个使用最新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
希望这对感兴趣的人有所帮助。
