Twitter引导3两列全高
我试图使用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>
有没有办法使用默认的twitter bootstrap 3类？
编辑：在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）为了不搞乱bootstrap的本地列类，我们在标记中添加了另一个类似no-float类，并且只在这个类中设置了display:table-cell和float:none （和列类本身一样）。
2）如果我们只想为特定的断点（比如中等屏幕宽度或更高）使用css表代码，但是对于移动屏幕，我们希望默认回到通常的引导行为，而不是将我们的自定义CSS封装在媒体查询，说：
@media (min-width: 992px) { .row .no-float { display: table-cell; float: none; } }
Codepen演示
现在，对于较小的屏幕，这些列的行为就像缺省的引导列（每个列都有全宽）。
3）如果所有屏幕宽度都需要1：3的比例，那么从标记中删除引导程序的col-md- *类可能会更好，因为这不是它们要使用的方式。
Codepen演示
你可以达到你想要的padding-bottom: 100%; margin-bottom: -100%; padding-bottom: 100%; margin-bottom: -100%; 诀窍，你可以看到这个小提琴。
我改变你的HTML一点点，但你可以用你自己的HTML与下面的代码达到相同的结果
.col-md-9 { overflow: hidden; } .col-md-3 { padding-bottom: 100%; margin-bottom: -100%; }
纯CSS的解决scheme
工作小提琴
只使用CSS2.1，使用所有浏览器（IE8 +）， 不指定任何高度或宽度。
这意味着，如果您的标题突然变长，或者您的左侧导航需要放大，则无需在CSS中修复任何内容 。
完全响应，简单明了，非常容易pipe理。
<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将采取rest。 它是如何实现的？ 通过将100％高度的容器边上的空元素（使用:before ） HeightTaker一个空元素，并在最后使用清除规则（使用:after ）给HeightTaker一个空元素。 该元素不能与浮动元素在同一行，所以他被推到最后。 这正是文件的100％。
因此，我们使HeightTaker跨越容器高度的其余部分，没有说明任何特定的高度/边界。
在那里HeightTaker我们build立一个正常的浮动布局（为了实现像显示列）与一个小的变化..我们有一个Wrapper元素，这是100%工作所需的高度。
更新
这里是带有Bootstrap类的Demo。 （我刚刚添加一个div到你的布局）
我想到了一个微妙的变化，它不会改变默认的引导行为。 我只能在需要的时候才能使用它：
.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>
据我所知，你可以使用5种方法来完成这个任务：
- 使用CSS显示表格/表格单元格属性或使用实际表格。
- 在包装器中使用绝对定位的元素。
- 使用Flexbox显示器属性，但到目前为止，它仍然有部分支持
- 通过使用人造色谱柱技术来模拟全色谱柱高度。
- 使用填充/余量技术。 看例子 。
引导：我没有太多的经验，但我不认为他们提供的风格。
.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; }
解决scheme可以通过两种方式来实现
- 使用display：table和display：table-cell
- 使用填充和负边距。
用于获得上述解决scheme的类不在引导程序3中提供。display：table和display：table-cell仅在HTML中使用表格时给出。 负边距和填充类也不存在。
因此，我们必须使用自定义CSS来实现这一点。
以下是第一个解决scheme
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; }
下面是第二个解决scheme
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解决scheme很容易，它像一个魅力跨浏览器。
您只需在nav和content列中添加一个大填充和一个同样大的负边距，然后将其行放在隐藏了溢出的类中。
即时取景
编辑视图
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; }
祝你好运！
好的，我已经使用Bootstrap 3.0实现了同样的function
示例与最新的引导
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; }
所以看来你最好的select是通过负margin-bottom策略反击padding-bottom margin-bottom 。
我举了两个例子。 一个在<header> 里面 .container ，另一个在外面 。
两个版本都应该正常工作。 请注意使用以下@media查询，以便在较小的屏幕上删除多余的填充…
@media screen and (max-width:991px) { .content { padding-top:0; } }
除此之外，这些例子应该解决您的问题。
如果你所关心的是放下颜色的话，还有一个更简单的方法。
把这首先或最后在你的身体标记
<div id="nfc" class="col col-md-2"></div>
这在你的CSS
#nfc{ background: red; top: 0; left: 0; bottom: 0; position: fixed; z-index: -99; }
你只是创build一个形状，钉在页面后面，并将其拉伸到全高。 通过使用现有的引导类，你会得到正确的宽度，并保持响应。
这个方法有一些限制，但是如果是页面的根结构，这是最好的答案。
尝试
<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%; }
为了您的参考，只要看看小提琴。
尝试这个
<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
我写了一个简单的与Bootstrap兼容的CSS来创build全宽和高度表：
小提琴： https ： //jsfiddle.net/uasbfc5e/4/
原则是：
- 在主DIV上添加“tablefull”
- 那么隐式地，下面的DIV将创build行
- 然后在行下面的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; }
如果在行（整个屏幕高度被采用）之后没有内容，则使用position: fixed; height: 100%的技巧position: fixed; height: 100% position: fixed; height: 100% .col:before元素可能工作.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="ajax/libs/twitter-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>
这里没有提到抵消。
您可以使用绝对定位左边栏。
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>
尝试这个
<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等…
你有没有在JAvascript的章节中看到bootstrap的afix ？
我认为这将是最好的和最简单的解决scheme。
看看那里： http : //getbootstrap.com/javascript/#affix
试验了这里提供的代码之后： Bootstrap教程
以下是使用最新的Bootstrap v3.0.2的另一种select：
标记：
<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
希望这有助于任何人感兴趣
