Twitter bootstrap 3两列全高

html CSS

神乐神奇

2020-03-24

我正在尝试使用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类一起使用？

第3586篇《Twitter bootstrap 3两列全高》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共15个回答
西里神奇 2020.03.24

在尝试了此处提供的代码之后：引导程序教程

这是使用最新的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

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

Gil伽罗小宇宙 2020.03.24

尝试这个

<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等。

Mandy 2020.03.24

您是否 在JAVAscript的部分中看到了引导程序的修补程序？

我认为这将是最好，最简单的解决方案。

在那看看：http : //getbootstrap.com/javascript/#affix

蛋蛋泡芙 2020.03.24

这里没有抵消提及。

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

的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>
小胖Gil 2020.03.24

尝试这个 

 <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-sensitive-websites-using-twitter-bootstrap/

感谢Syed

HarryItachi 2020.03.24

我编写了一个与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;
}
卡卡西Near 2020.03.24

好的，我已经通过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;
}
神无 2020.03.24

如果您担心的只是放下颜色，那么还有一种更简单的方法。

将此标签放在您的身体标签的首尾

<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有一些局限性，但是如果它是针对页面的根结构的，那是最好的答案。

村村 2020.03.24

尝试

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

}

供您参考，请看小提琴。

Stafan路易 2020.03.24

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

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

两种版本均应正常工作。请注意以下@media查询的使用，以便删除较小屏幕上的多余填充...

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

除此之外，这些示例还可以解决您的问题。

老丝Tom 2020.03.24

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

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;
}
Harry神奇 2020.03.24

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

我对您的HTML进行了一些更改，但是使用以下代码，您可以使用自己的HTML达到相同的结果

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

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}
飞云阿飞 2020.03.24

据我所知，您最多可以使用5种方法来完成此任务：

  1. 使用CSS显示表/表单元格属性或使用实际表。
  2. 在包装器内使用绝对定位的元素。
  3. 使用Flexbox显示属性，但到今天为止，它仍然有部分支持
  4. 通过使用人造色谱柱技术模拟整个色谱柱的高度。
  5. 使用填充/边距技术。参见示例。

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;
}
番长 2020.03.24

我想到了一个细微的更改，它不会更改默认的引导行为。而且我只能在需要时使用它：

.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>
古一 2020.03.24

纯粹的CSS解决方案非常容易，并且可以像一个魅力十足的跨浏览器一样工作。

您只需向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; 
}

祝好运！

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android