引导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>

有办法使它与默认的推特引导3类?

当前回答

一个纯粹的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; 
}

好运！

2013-10-10 11:47:28

其他回答

试试这个

 <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

2013-10-12 18:55:09

一个纯粹的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; 
}

好运！

2013-10-10 11:47:28

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

2016-09-09 13:22:06

try

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

}

为了供你参考，请看看小提琴。

2013-10-08 06:49:39

因此，你的最佳选择似乎是用负边际底部策略来对抗填充底部。

我举了两个例子。一个是<header>在.container内，另一个是<header>在.container外。

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

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

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

2013-10-12 01:04:00

引导3两列全高

推荐文章

最新文章

标签