Question

我尝试使用div填充其父级，该父级已使用flexbox布局定位。正如你在下面的jsfiddle中看到的那样，div的高度并没有填满父亲的身高。

为什么它不起作用？（从@mrmcgreg更新：它不适用于Chrome但适用于FF）

HTML：

<header id="header">
  header
</header>

<div id="content">
      <div>
        height: 100%
      </div>
</div>

的CSS：

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-flow: column;
}
#header {
  flex: 0 1 auto;
  background-color: green;
}
#content {
  flex: 1 1 auto;
  background-color: blue;
}
#content div {
  height: 100%;
  background-color: red;
}

Answer 1

我检查了你的小提琴。似乎在Mac上的Firefox 47中工作。您使用的浏览器是什么？

我分叉了小提琴并更改了一些设置，以确保它正在按预期进行，但它的工作原理相同。但是在较旧版本的Safari中它不能在这里工作。也许尝试添加供应商前缀，看看是否有帮助？

检查此link on CSS Tricks是否有所有前缀。

fiddle

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
#header {
  height:30px;
  background-color: green;
}
#content {
  display:flex;
  flex-direction:column;
  flex:1;
  background-color: blue;
}
#content div {
  flex:1;
  height: 100%;
  background-color: red;
}

高度为100％的div不会填充使用flex定位的父级

1 个答案: