CSS 100% 从 div 而不是整个页面

Question

我正在尝试使用 CSS 中的 calc 进行计算。几个小时后，我发现我的实际 div 给出了错误的 100% 数字。

这是一个小例子:

html, body, .calender {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.appointmentsA {
	background: blue;
}

.appointmentsB {
	background: red;
}

.calender {
	display: table;
	width: 100%;
	table-layout: fixed;
	padding: 10px 10px 0 10px;
}
.calender .row {
	display: table-cell;
	padding: 0 10px;
}

.appointments {
	height: 100%;
}

.appointments:before {
			content: "test";
			position: absolute;
			top: calc(100% - 18px);
			color: #fff;
		}

<main class="calender">
	<div class="row">
		<h1 class="title">ABC</h1>
		<div class="appointments appointmentsA"></div>
	</div>
	<div class="row">
		<h1 class="title">DEF</h1>
		<div class="appointments appointmentsB"></div>
	</div>
</main>

红色和蓝色 block 的高度与容器 row 和主父级的高度相同。

是否有非 javascript 方法来获取彩色 block 的 100% 高度？ 如果彩色 block 具有真正的 100%，则“:after”元素将正确显示，而不仅仅是半个文本。

图片:example

Answer 1

你的意思是为全高col设置颜色？如果是，设置 position: absolute 为 title:

* {
  box-sizing: border-box;
}

html,
body,
.calender {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.appointmentsA {
  background: blue;
}

.appointmentsB {
  background: red;
}

.calender {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 10px 0 10px;
}

.calender .row {
  display: table-cell;
  padding: 0 10px;
}

.appointments {
  height: 100%;
}

.title {
  position: absolute;
}

<main class="calender">
  <div class="row">
    <h1 class="title">ABC</h1>
    <div class="appointments appointmentsA"></div>
  </div>
  <div class="row">
    <h1 class="title">DEF</h1>
    <div class="appointments appointmentsB"></div>
  </div>
</main>

或者对于彩色 div:

* {
  box-sizing: border-box;
}

html,
body,
.calender {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.appointmentsA {
  background: blue;
}

.appointmentsB {
  background: red;
}

.calender {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 10px 0 10px;
}

.calender .row {
  display: table-cell;
  padding: 0 10px;
  position: relative;
}

.appointments {
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  position: relative;
  z-index: 2;
}

<main class="calender">
  <div class="row">
    <h1 class="title">ABC</h1>
    <div class="appointments appointmentsA"></div>
  </div>
  <div class="row">
    <h1 class="title">DEF</h1>
    <div class="appointments appointmentsB"></div>
  </div>
</main>