引导3两列全高 - 开卷题库

小开

最佳答案

<强>编辑: 在引导4中，本机类可以产生全高列(演示)，因为它们将他们的网格系统更改为flexbox。(请继续阅读Bootstrap 3)

原生Bootstrap 3.0类不支持你描述的布局，但是，我们可以集成一些使用css表的自定义CSS来实现这一点

__abc0 / __abc1

标记:

<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 (Navigation:Content) -(由于bootstrap的默认类:col-md-3和col-md-9)

注:

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;
}
}

< a href = " http://codepen。io/danield770/pen/amJAxd" rel="noreferrer"> code depen demo . io/danield770/pen/amJAxd" rel="noreferrer">

现在，对于较小的屏幕，列将表现为默认的引导列(每个都获得全宽度)。

3）如果所有屏幕宽度都需要1:3的比例，那么从标记中删除bootstrap的col-md-*类可能会更好，因为这不是它们的使用方式。

< a href = " http://codepen。io/danield770/pen/GjWbAG" rel="noreferrer"> code depen demo . io/danield770/pen/GjWbAG" rel="noreferrer">

小开

你可以用padding-bottom: 100%; margin-bottom: -100%;技巧实现你想要的，你可以在这小提琴中看到。

我稍微改变了你的HTML，但是你可以用下面的代码用你自己的HTML达到同样的结果

.col-md-9 {
overflow: hidden;
}


.col-md-3 {
padding-bottom: 100%;
margin-bottom: -100%;
}

小开

试一试

<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%;


}

为了供您参考，只需查看小提琴。

小开

据我所知，你可以使用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解决方案

Working Fiddle .

仅使用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>

< >强劲的解释: 容器div占用了容器体100%的高度，它被分为2部分。头部分将跨越到所需的高度，而HeightTaker将占据其余部分。它是如何实现的?通过在容器旁边以100%的高度浮动一个空元素(使用:before)，并在HeightTaker的末尾使用clear规则给一个空元素(使用:after)。那个元素不能和被浮动的元素在同一行，所以他被推到最后。也就是文档的100%

这样，我们使HeightTaker跨越容器高度的其余部分，而不声明任何特定的高度/边距。

在HeightTaker中，我们通过一个微小的改变来构建一个正常的浮动布局(以实现类似列的显示)。我们有一个Wrapper元素，它是100%高度工作所必需的。

更新

<强>的< / >强带Bootstrap类的演示。(我只是在你的布局中添加了一个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的< em > afix < / em > ??

我认为这是最好的&最简单的解决办法。

看看这里:http://getbootstrap.com/javascript/#affix

小开

解决方案可以通过两种方式实现

使用display:table和display:table-cell
使用填充和负边距。

bootstrap 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列中添加一个大的填充和一个同样大的负边距，然后将它们的行包装到一个隐藏溢出的类中实时视图 < br > 编辑视图 < / p >

超文本标记语言

<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;
}

好运！

小开

因此，似乎你最好的选择是用负margin-bottom策略来对抗padding-bottom。

我举了两个例子。一个带有<header> inside . .container，另一个带有outside。

两个版本都可以正常工作。注意使用下面的@media查询，以便它在较小的屏幕上删除额外的填充…

@media screen and (max-width:991px) {
.content { padding-top:0; }
}

除此之外，这些例子应该可以解决您的问题。

小开

试试这个

 <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

小开

好的，我已经用引导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;
}

小开

在尝试了这里提供的代码之后:引导教程

下面是另一个使用最新引导 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

希望这对感兴趣的人有所帮助。

小开

我想了一个微妙的改变，这并不改变默认的引导行为。我只能在需要的时候使用它:

.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>

小开

如果你所关心的只是设定颜色，有一个更简单的方法。

把这个放在你身体标签的第一个或最后一个

<div id="nfc" class="col col-md-2"></div>

这是CSS

#nfc{
background: red;
top: 0;
left: 0;
bottom: 0;
position: fixed;
z-index: -99;
}

你只是在创建一个形状，把它固定在页面后面，然后把它拉伸到最大高度。通过使用现有的引导类，您将获得正确的宽度，并且它将保持响应。

ofc的这种方法有一些限制，但如果它用于页面的根结构，它是最好的答案。

小开

如果行之后没有内容(取整个屏幕高度)，对.col:before元素使用position: fixed; height: 100%的技巧可能很有效:

.

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>

小开

这里没有提到抵消。

您可以使用绝对来定位左侧侧栏。

CSS

.sidebar-fixed{
width: 16.66666667%;
height: 100%;
}

超文本标记语言

<div class="row">
<div class="sidebar-fixed">
Side Bar
</div>
<div class="col-md-10 col-md-offset-2">
CONTENT
</div>
</div>

小开

我写了一个与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;
}

小开

现代且非常简单的解决方案:

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;
}