html - CSS 布局 - 动态列内容定义包装器高度

Question

晚上，
我在布局方面苦苦挣扎(我总是在 CSS 方面苦苦挣扎，把它诅咒成一种特殊的 hell !)。 I've simplified as best I can and set up a plunk .我在追求以下...

• 内容到视口(viewport)的全高。
• 固定高度 <header>和 <footer>与 width: 100% .
• <footer>设置在视口(viewport)的底部。
• 之间的其余空间是两列 - Col A 是固定宽度，Col B 填充视口(viewport)宽度的其余部分，两者都是 height: 100% .
• Col B 包含一个 <canvas>水平居中。

这是我正在处理的 Angular 应用程序的布局，Col A 中的内容是根据应用程序中的数据生成的，因此它的高度将始终发生变化。我想要 <footer>如果 Col A 达到大于视口(viewport)的高度，则被向下推，否则 <footer>应保持在 bottom: 0 .

In my example你看到 <footer>卡在底部，但如果您降低视口(viewport)高度，它最终会被 <canvas> 阻挡元素。我希望左侧 Col A 的内容发生同样的事情。随着元素的添加，我想要 <footer>必要时向下推，如果视口(viewport)缩小，我希望 Col A 内容阻止 <footer> .

目前 Col A 是 position: absolute所以什么都不阻止，但如果我将它设置为 relative它失去了它的全部高度(绿色背景)。基本上我一整天都在绕圈子。它早已不再是一个有趣的问题，而是成为一个真正的痛苦，所以如果你能提供任何建议，我将不胜感激。

不确定我是否已经很好地解释了自己。我会澄清是否可以，请问。

提前干杯

Answer 1

不要使用绝对定位。当您希望某些东西增长以填充可用空间时，请将 flexbox 与 flex-grow: 1 一起使用。

html {
  height: 100%;
}
html, body, #page-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0;
}
#page-wrapper {
  flex-direction: row;
  background-color: #ff6900;
}
header {
  background-color: #9b9b9b;
  height: 40px;
}
#ui-wrapper {
  background-color: #00ff00;
  width: 120px;
}
.filler {
  background-color: gold;
  height: 50px;
  border-bottom: 3px double;
}
#display-wrapper {
  margin-top: 40px;
  flex-grow: 1;
}
canvas {
  display: block;
  border: solid 1px red;
  margin: 0 auto;
}
footer {
  background-color: #8e8e8e;
}

<header>Header</header>
<div id="page-wrapper">
  <div id="ui-wrapper">
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
  </div>
  <div id="display-wrapper">
    <canvas width="300px" height="300px"></canvas>
  </div>
</div>
<footer>Footer</footer>