我试图用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类?
编辑:
在Bootstrap 4中，本地类可以生成全高列(DEMO)，因为它们将网格系统更改为flexbox。(请继续阅读Bootstrap 3)
原生Bootstrap 3.0类不支持你描述的布局，但是，我们可以集成一些自定义CSS，利用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属性)和比例为1:3(导航:内容)的中等屏幕宽度和以上-(由于bootstrap的默认类:col-md-3和col-md-9)
NB:
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演示
现在，对于较小的屏幕，列将表现为默认的引导列(每个都获得全宽度)。
3)如果所有屏幕宽度都需要1:3的比例，那么从标记中删除bootstrap的col-md-*类可能会更好，因为这不是它们应该被使用的方式。
Codepen演示
据我所知，你可以使用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;
}
纯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>
Explanation:
The container div takes 100% height of the body, and he's divided into 2 sections.
The header section will span to its needed height, and the HeightTaker will take the rest.
How is it achieved? by floating an empty element along side the container with 100% height (using :before), and giving the HeightTaker an empty element at the end with the clear rule (using :after). that element cant be in the same line with the floated element, so he's pushed till the end. which is exactly the 100% of the document.
这样，我们就可以让highttaker跨越容器高度的其余部分，而不需要声明任何特定的高度/边距。
在highttaker内部，我们建立了一个正常的浮动布局(以实现类似列的显示)，并进行了微小的改变。我们有一个Wrapper元素，这是100%高度工作所需要的。
更新
下面是带有Bootstrap类的演示。(我只是在你的布局中添加了一个div)
解决方案可以通过两种方式实现
使用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 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;
}
在尝试了这里提供的代码后:引导教程
下面是另一个使用最新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
希望这对感兴趣的人有所帮助。
我写了一个与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;
}
