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

不要使用绝对定位。当您希望某些内容增长以填充可用空间时，请将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>

Answer 2

这是我的建议，基于带有左主右容器的头 - 身 - 脚。可以使用您选择的尺寸，填充和颜色调整示例（右侧容器设置为零宽度，因为它未使用）。内容画布水平和垂直居中。

小提琴：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;
}

/**/

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

2 个答案: