Twitter bootstrap 3两列全高

Question

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

Answer 1

你可以通过这个padding-bottom: 100%; margin-bottom: -100%;技巧实现你想要的东西，你可以在这个小提琴中看到。我稍微改变了你的HTML，但你可以使用以下代码用自己的HTML实现相同的结果.col-md-9 {&nbsp; &nbsp; overflow: hidden;}.col-md-3 {&nbsp; &nbsp; padding-bottom: 100%;&nbsp; &nbsp; margin-bottom: -100%;}

Answer 2

纯CSS解决方案仅使用CSS2.1，可以使用所有浏览器（IE8 +），而无需指定任何高度或宽度。这意味着如果您的标题突然变长，或者您的左侧导航需要放大，则无需在CSS中修复任何内容。完全响应，简单，清晰，易于管理。<div class="Container">&nbsp; &nbsp; <div class="Header">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="HeightTaker">&nbsp; &nbsp; &nbsp; &nbsp; <div class="Wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="LeftNavigation">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="Content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>说明： 容器div占据身体的100％高度，并分为2个部分。标题部分将跨越其所需的高度，HeightTaker其余部分将采用。它是如何实现的？通过在容器旁边以100％高度（使用:before）浮动一个空元素，并HeightTaker在末尾给出一个空元素和清除规则（使用:after）。那个元素与浮动元素不在同一条线上，所以他被推到了最后。这正是文件的100％。由此我们将HeightTaker跨度设置为容器高度的其余部分，而没有说明任何特定的高度/边距。在内部，HeightTaker我们构建一个正常的浮动布局（以实现像显示一样的列），并进行微小的更改..我们有一个Wrapper元素，这是100%高度工作所需要的。更新这是使用Bootstrap类的Demo。（我刚给你的布局添加了一个div）