Question

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

这是我的代码，我也使用了几个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并重新定义了容器流体：

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％，依此类推，但这不会发生。实际上，每一行似乎只包含其内容而不是占据完整的百分比。我该如何解决这个问题？

Answer 1

如果要在％age中应用高度，则必须在父容器上应用高度，在您的情况下，父容器是

.row.fullheight

请将修复高度应用于此课程，如

.row.fullheight{height: 100px}

现在，当你将子元素（.height20）的高度提高到20％时，它将需要20％的总高度为20px，对于其他孩子来说也是如此

希望这会有所帮助。感谢

Bootstrap网格 - 在列中设置相对行高

1 个答案: