绝对定位、百分比高度和 flexbox [重复]答案

【问题标题】：Absolute positioning, percentage heights and flexbox [duplicate]绝对定位、百分比高度和 flexbox [重复]
【发布时间】：2020-03-07 08:46:15
【问题描述】：

我想要一个具有最大高度的 flexbox 容器（比如容器的 50%）。很简单吧？

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  overflow: hidden;
  height: 50%;
  position: absolute;
}
.list {
  flex: 0 1 auto;
  overflow: auto;
}
.fixed {
  flex: 0 0 auto;
}

<div class="container">
    <header class="fixed">Header</header>
    <div class="list">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
    <footer class="fixed">Footer</footer>
</div>

这可行，但删除 position: absolute 并增长超过 50%（并且宽度发生变化）。这是为什么呢？

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  overflow: hidden;
  height: 50%;
}
.list {
  flex: 0 1 auto;
  overflow: auto;
}
.fixed {
  flex: 0 0 auto;
}

<div class="container">
    <header class="fixed">Header</header>
    <div class="list">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
    <footer class="fixed">Footer</footer>
</div>

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

行为在规范中定义：

10.5 Content height: the height property

<percentage>

指定百分比高度。

百分比是相对于高度计算的生成框的包含块。

如果未明确指定包含块的高度（即，它取决于内容高度），而这个元素不是绝对定位，使用的高度计算为好像auto 是指定。

所以，这里有两个要点：

当您的容器不是绝对定位时（即，它保持流入），父级上没有定义高度这一事实意味着height: 50% 解析为height: auto（内容的高度）。

如果您设置，比如说body { height: 100vh }，您的容器将占据 50% 的高度。

body {
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  overflow: hidden;
  height: 50%;
}

.list {
  flex: 0 1 auto;
  overflow: auto;
}

.fixed {
  flex: 0 0 auto;
}

<div class="container">
  <header class="fixed">Header</header>
  <div class="list">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
  <footer class="fixed">Footer</footer>
</div>

当您的容器绝对定位时，height: auto 规则不适用，height: 50% 按预期工作。

此外，流入块级元素采用其容器的宽度。一旦你应用了绝对定位——从文档流中移除元素——“取父元素的宽度”规则不再适用，你需要指定容器的宽度，或者定义偏移属性（即@ 987654334@、right等）。

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  overflow: hidden;
  height: 50%;
  position: absolute;
  
  /* new */
  left: 0;
  right: 0;
  /* or this */
  /* width: 100%; */
}

.list {
  flex: 0 1 auto;
  overflow: auto;
}

.fixed {
  flex: 0 0 auto;
}

/* new */
 * { box-sizing: border-box; }

<div class="container">
  <header class="fixed">Header</header>
  <div class="list">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
  <footer class="fixed">Footer</footer>
</div>

更多细节：

【讨论】：