css – Chrome/Safari无法填充100％高度的父级

我想要一个具有特定高度的垂直菜单。

每个孩子必须填充父级的高度，并且具有中间对齐的文本。

孩子的数量是随机的，所以我必须使用动态值。

Div .container包含一个随机数的子元素(.item)，总是必须填充父元素的高度。为了实现我使用flexbox。

为了使文本对齐到中间的链接我使用display：table-cell技术。但是使用表格显示需要使用100％的高度。

我的问题是.item-inner {height：100％}在webkit(Chrome)中不工作。

>有这个问题的修复吗？
>或者有一个不同的技术，使所有.item填充父的高度与文本垂直对齐到中间？

Example here jsFiddle,should be viewed in Firefox and Chrome

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

解决方法

问题

My problem is that .item-inner { height: 100% } is not working in
webkit (Chrome).

它不工作，因为你使用百分比高度不符合规范的传统实现的方式。

07000

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box’s
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned,the value computes to auto.

auto
The height depends on the values of other properties.

换句话说，对于在流内子级上工作的百分比高度，父级必须具有设置的高度。

在你的代码中，顶层容器有一个定义的高度：.container {height：20em; }}

第三级容器具有定义的高度：.item-inner {height：100％; }}

但是在它们之间，二级容器 – .item – 没有定义的高度。 Webkit将其视为缺少链接。

.item-inner告诉Chrome：给我高度：100％。 Chrome查找父(.item)以供参考，并做出回应：100％的什么？我没有看到任何东西(忽略flex：1规则是那里)。因此，它应用height：auto(content height)，根据规范。

另一方面，Firefox现在接受父级的flex高度作为孩子的百分比高度的参考。 IE11和Edge也接受弯曲高度。

此外，如果与flex-basis(任何值工作，包括flex-basis：0)结合使用，Chrome将接受flex-grow作为足够的父引用。然而，在写这篇文章的时候，这个解决方案在Safari中失败了。

#outer {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: white;
  border: 1px solid red;
}
#middle {
  flex-grow: 1;
  flex-basis: 1px;
  background-color: yellow;
}
#inner {
  height: 100%;
  background-color: lightgreen;
}

<div id="outer">
  <div id="middle">
    <div id="inner">
      INNER
    </div>
  </div>
</div>

解决方案

1.在所有父元素上指定高度

可靠的跨浏览器解决方案是在所有父元素上指定高度。这可以防止缺少链接，基于Webkit的浏览器会认为违反了规范。

请注意，min-height和max-height是不可接受的。它必须是height属性。

CSS相对和绝对定位

应用位置：相对于父级和位置：绝对到子级。

大小绝对定位的孩子与高度：100％和宽度：100％，或使用偏移属性：顶部：0，右：0，底部：0，左：0。

使用绝对定位，百分比高度在父级上没有指定高度。

3.删除不必要的HTML容器(推荐)

是否需要两个容器周围按钮？为什么不删除.item或.item-inner，或两者？虽然button elements sometimes fail as flex containers，它们可以是flex项目。考虑使按钮成为.container或.item的子对象，并删除无偿标记。

这里有一个例子：

.container {
    height: 20em;
    display: flex;
    flex-direction: column;
    border: 5px solid black
}

a {
    flex: 1;
    background: orange;
    border-bottom: 1px solid white;
    display: flex;                   /* nested flex container (for aligning text) */
    align-items: center;             /* center text vertically */
    justify-content: center;         /* center text horizontally */
}

<div class="container">
    <a>Button</a>
    <a>Button</a>
    <a>Button</a>
</div>

4.嵌套Flex容器(推荐)

去除百分比高度。删除表属性。摆脱vertical-align。避免绝对定位。只要坚持flexbox一路通过。

将display：flex应用于flex项(.item)，使其成为flex容器。这会自动设置align-items：stretch，它告诉孩子(.item-inner)展开父节点的整个高度。

尝试此操作(无需更改HTML)：

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

jsFiddle

更多信息

在CSS中通常如何工作的百分比：

> Working with the CSS height property and percentage values

使用父级的flex高度作为子级百分比高度的参考的Firefox和IE示例：

> Chrome ignoring flex-basis in column layout
> Height is not correct in flexbox items in Chrome
> Flexbox in Chrome–How to limit size of nested elements?
> min-height inside a flex item is being ignored in chrome

css – Chrome/Safari无法填充100％高度的父级

解决方法

相关推荐