Question

我有一个包含2个div元素的简单包装器。

我希望第一个获得85％的高度，第二个获得高度的15％。

当我为包装器设置固定高度时，它会起作用。虽然可悲的是我的包装纸有一个动态的高度。

你知道我怎么能做到这一点吗？

我还提供了一个plunker：http://plnkr.co/edit/HQpahfmRasij8Zougjkn?p=preview

代码：

＆＃13;

.outer{
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  /* if i set the fixed height everthing works
     though i do want a dynamic height
  height: 800px; */
}
.main {
  background-color: blue;
  display: flex;
  flex: 0 0 85%;
  max-height: 85%;
  flex-direction: row;
  height: 400px;
}
.navigator {
  background-color: red;
  display: flex;
  flex: 0 0 15%;
  max-height: 15%;
  flex-direction: row;
  height: 400px;
}

＆＃13;

<div class="outer">
  <div class="main" >
    <!-- this container should have 85% of the outer containers height -->
  </div>
  <div class="navigator" >
    <!-- this container should have 15% of the outer containers height -->
  </div>
</div>

＆＃13;

Answer 1

您可以尝试使用flex-grow代替flex-basis或height来调整Flex项目的大小。

在以下示例中，一个弹性项将占用容器中85％的可用空间。另一个弹性项目将占用剩余的15％。

HTML （无更改）

<强> CSS

.outer {
  display: flex;
  flex-direction: column;
}

.main {  flex-grow: 85; }
.navigator { flex-grow: 15; }  /* flex-grow: 1 would work as well */

Revised Plunkr

在此处详细了解弹性高度：Heights rendering differently in Chrome and Firefox

Answer 2

您可以在没有flex的情况下进行初始（外部）布局，因为我无法看到不需要它的点。

但要求是相同的，.outer的父级需要一个高度，无论是继承还是设置。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
.outer {
  height: 100%;
}
.main {
  background-color: blue;
  height: 85%;
  display: flex;            /* this is for main's children */
  flex-direction: row;      /* this is for main's children */
}
.navigator {
  background-color: red;
  height: 15%;
  display: flex;            /* this is for nav's children */
  flex-direction: row;      /* this is for nav's children */
}

＆＃13;

<div class="outer">
  <div class="main" >
    <!-- this container should have 85% of the outer containers height -->
  </div>
  <div class="navigator" >
    <!-- this container should have 15% of the outer containers height -->
  </div>
</div>

＆＃13;

Answer 3

如果他们是身体的直接孩子，那么您首先需要在patrents上设置height：html＆amp; body以获得可继承的值。

然后不再需要outer，body已经存在。

将height设置为最小（并最终为最小高度）并通过以下方式请求另一个增长：flex:1;。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  background: tomato;
}
.navigator {
  height: 15%;
  min-height: 2em;
  background: lime;
}

＆＃13;

<div class="main">
  <!-- this container should have 85% of the outer containers height -->
  main
</div>
<div class="navigator">
  navigator
  <!-- this container should have 15% of the outer containers height -->
</div>

＆＃13;

http://plnkr.co/edit/R502OvyV2RR8GZ96UJvt?p=preview

评论拉到了这里：

@JuHwon那么，父母是否具有已知的大小遗传。你能举个例子来说明你的麻烦吗？ ％值需要参考来计算它的比率，在flex imbrication 高度应该是可用的或类似的东西 flex:85;＆amp; flex:15; http://codepen.io/gc-nomade/pen/pgOjXB

设置容器具有动态高度时的百分比高度以弯曲项目

3 个答案: