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

Question

晚上，
我在一个布局上苦苦挣扎（我总是在 CSS 上苦苦挣扎，把它诅咒到一种特殊的地狱！）。 I've simplified as best I can and set up a plunk。我追求的是...

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

这是我正在开发的 Angular 应用程序的布局，Col A 中的内容是根据应用程序中的数据生成的，因此它的高度将始终在变化。如果 Col A 的高度大于视口，我希望将<footer> 向下推，否则<footer> 应保持在bottom: 0。

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

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

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

提前干杯

Answer 1

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

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>

Answer 2

这是我的建议，基于带有 Left-Main-Right 容器的 Head-Body-Foot。该示例可以使用您选择的大小、填充和颜色进行调整（右容器设置为零宽度，因为它未使用）。内容画布水平和垂直居中。

小提琴：https://jsfiddle.net/javierrey/t8a74d93/11/

HTML：

<div class="lay">
  <div class="lay-head">
    <div class="lay-main">
    Header
    </div>
  </div>
  <div class="lay-body">
    <div class="lay-left">
    Left
    </div>
    <div class="lay-right">
    </div>
    <div class="lay-main">
      <canvas class="content">
      </canvas>
    </div>
  </div>
  <div class="lay-foot">
    <div class="lay-main">
    Footer
    </div>
  </div>
</div>

CSS：

/* General default (Bootstrap compatible) */

html, body {width: 100%; height: 100%;}
body {margin: 0; overflow-x: hidden; overflow-y: auto; background-color: #ffffff;}
body, input, textarea, keygen, select, button {color: #555555;}
* {box-sizing: border-box; font-family: sans-serif; font-size: 14px;}
*:focus {outline: 0;}
a {text-decoration: none;}
textarea {resize: none; overflow: auto;}

/* Default Layout */

.lay {position: relative; overflow: hidden; height: 100%;}
.lay-head {position: absolute; overflow: hidden; top: 0; width: 100%; height: 0;}
.lay-foot {position: absolute; overflow: hidden; bottom: 0; width: 100%; height: 0;}
.lay-body {overflow: hidden; width: 100%; height: 100%; padding-top: 0; padding-bottom: 0;}
.lay-left {overflow: hidden; float: left; height: 100%; width: 0;}
.lay-right {overflow: hidden; float: right; height: 100%; width: 0;}
.lay-main {overflow-x: hidden; overflow-y: auto; width: auto; height: 100%;}

/* Custom Layout */

.lay>.lay-head, .lay>.lay-foot {
  height: 32px;
  text-align: center;
}

.lay>.lay-body {
  padding-top: 32px; /* Same as head height */
  padding-bottom: 32px; /* Same as foot height */
}

.lay>.lay-body>.lay-left {
  width: 150px;
}

.lay>.lay-body>.lay-right {
  width: 0;
}

/* Content */

.lay>.lay-body>.lay-main {
  text-align: center;
  padding: 20px; /* Custom: 0, 20px */
}

.lay>.lay-body>.lay-main>.content {
  position: relative; /* Center vertically (1) */
  top: 50%; /* Center vertically (2) */
  transform: translateY(-50%); /* Center vertically (3) */
  width: 100%;
  height: 100px;
}

/* Theming */

body {
  background: #ffffff;
}

body, input, textarea, keygen, select, button {
  color: #777777;
}

.lay>.lay-head, .lay>.lay-foot {
  background-color: #000000;
  color: #cccccc;
  text-align: center;
  padding-top: 7px;
}

.lay>.lay-body>.lay-left {
  padding: 7px;
  background-color: #dddddd;
  color: #555555;
}

.lay>.lay-body>.lay-main>.content {
  background-color: #333333;
}

/**/