引导网格 - 在列中设置相对行高答案

【问题标题】：Bootstrap grid - Setting relative row height in column引导网格 - 在列中设置相对行高
【发布时间】：2016-09-16 23:16:53
【问题描述】：

我的布局由顶部菜单、主要内容和页脚组成。在主要内容中，我想占据整个页面（不多不少，这样我就不需要向下滚动，我可以填满页面）。在主要内容中，我想通过百分比拆分行并堆叠一些元素，但我不能。

这是我的代码，我也在其中使用了几个 Angular 指令：

<body ng-app="pathfinderApp">
<app-top-menu></app-top-menu>
<div class="container-fluid">
  <div ng-view=""></div>
</div>
<app-footer></app-footer>

我定义了fullheight并重新定义了container-fluid：

html, body {
  height: 100%;
}

.container-fluid {
  height: 90%;
}

.fullheight {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

我的主要内容由两个并排的块组成：一个 3 列，另一个 9 列。让我们只考虑第一个块（3 列）：

<div class="row fullheight"><!-- this row fills up the page-->
  <div class="col-md-3 col-sm-3"> <!-- this is still filling up the page-->
    <div class="row height20"><!-- this does not take 20% of the containing row, but less -->
      <h3 class="text-center no-margin-top">Main Action</h3>
      <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-default">
          <span>My button</span>
        </a>
      </div>
    </div>

    <div class="row height40">...</div>
    <div class="row height30">...</div>
    <div class="row height10">...</div>
  </div>
 <!-- rest of the columns -->
</div>

身高类是这样的：

.height20 {
  min-height: 20%;
  height: 20%;
  max-height: 20%;
}

我希望列中的第一行占总高度的 20%，第二行占总高度的 40%，依此类推，但这不会发生。事实上，每一行似乎只包含其内容，而不是全部百分比。我该如何解决？

【问题讨论】：

要使用百分比高度，父元素也必须明确设置高度。
我实际上需要用最外面的容器填充页面。我的带有 container-fluid 类的 div 确实占据了页面的整个高度。我该如何面对这种情况？

标签： html css twitter-bootstrap

【解决方案1】：

当你想在 %age 中应用高度时，你必须在父容器上应用高度，在你的情况下，父容器是

.row.fullheight

请像这样对此类应用固定高度

.row.fullheight{height: 100px}

现在，当您将子元素（.height20）的高度设置为 20% 时，它将占用 20% 的总高度，即 20px，其他子元素依此类推

希望这会有所帮助。谢谢

【讨论】：