Question

简单的场景 - 我原以为。

这个想法是app-bar是一个固定的高度 - 设置为56px。下面的内容DIV应填充剩余空间 - 容器的高度约为320像素，使用父母的百分比设置。

如果我使用height:100%，则Flexbox不会启动，但是，如果我使用height:320px它。

有什么想法吗？高度需要是一个百分比，因为它正在填充响应的父级。

<header class="img-app-bar">
    <div class="container">
        <div class="app-bar"></div>
        <div class="content"></div>
    </div>
</header>

.img-app-bar {

    .container {

        display:flex;
        flex-direction:column;

        background-color:Red;
        height:100%;

        .app-bar {
            flex:0;
        }
        .content {
            flex:1;

            background-color:Yellow;
        }
    }
}

Answer 1

如果父元素没有高度css样式，孩子的百分比高度它不会起作用（除非你使用绝对定位黑客） - 那就是这样的css工作

解决您的情况的方法是执行以下操作（上述绝对位置黑客）：

＆＃13;

.img-app-bar {
  position: relative;
  /* the following is just for giving height without using height */
  padding-top: 300px;
  background: red;
}
.container {
  /*this seems to set a height without setting a height*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.flex {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.app-bar {
  height: 56px;
  background: green;
}
.content {
  flex:1;
  background: blue;
}

＆＃13;

<header class="img-app-bar">
  <div class="container">
    <div class="flex">
      <div class="app-bar"></div>
      <div class="content"></div>
    </div>
  </div>
</header>

＆＃13;

Answer 2

问题是.img-app-bar也需要一个高度。否则，.container的高度为100％。

body, html {width: 100%; height: 100%; margin: 0; padding: 0}

.img-app-bar {
  width: 100%;
  height: 100%;
}

.container {
  display:flex;
  flex-direction:column;

  background-color:Red;
  height:100%;
}

.app-bar {
  height: 56px;
}
.content {
  flex:1;

  background-color:Yellow;
}

<header class="img-app-bar">
    <div class="container">
        <div class="app-bar"></div>
        <div class="content"></div>
    </div>
</header>

Flexbox不符合百分比时的容器高度

2 个答案: