我试图用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 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;
}
据我所知，你可以使用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;
}
我写了一个与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;
}
编辑:
在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演示
