当侧边栏超过屏幕高度时，如何将此粘性页脚粘贴到布局底部？

Question

我有两个列布局，带有固定宽度的侧边栏（红色），扩展内容区域（蓝色）和粘性页脚（粉红色）。除了粘性页脚之外，一切都按照它应该的方式运行。

当侧边栏比视口高时，蓝色内容区域不会展开以填充剩余空间。因此，当您向下滚动时，页脚下方有空格（屏幕截图中的绿色区域）。

如何确保.content-main区域扩展以强制页脚向下？ （我应该提一下，我正在努力保持一切流畅，并且我的目标是支持IE9 +）

Jsfiddle：https://jsfiddle.net/463vhday/5/

HTML

<div class="sidebar">
  <h1>Titel</h1>
  <a class="sidebar-link" href="">Link link 1</a>
  <a class="sidebar-link" href="">Link link 2</a>
  <a class="sidebar-link" href="">Link link 3</a>
  <a class="sidebar-link" href="">Link link 4</a>
  <a class="sidebar-link" href="">Link link 5</a>
  <a class="sidebar-link" href="">Link link 6</a>
  <a class="sidebar-link" href="">Link link 7</a>
  <a class="sidebar-link" href="">Link link 8</a>
  <a class="sidebar-link" href="">Link link 9</a>
  <a class="sidebar-link" href="">Link link 10</a>
  <a class="sidebar-link" href="">Link link 11</a>
  <a class="sidebar-link" href="">Link link 12</a>
</div>
<div class="content">
  <header class="content-header">Header</header>
  <main class="content-main">Main</main>
  <footer class="content-footer">Footer</footer>
</div>

CSS

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: green;
}

.sidebar {
  float: left;
  background: red;
  min-height: 100%;
  width: 5rem;
}

.sidebar-link {
  display: block;
}

.content {
  display: table;
  background: yellow;
  min-height: 100%;
  width: calc(100% - 5rem);
}

.content-header {
  display: table-row;
  background: purple;
  height: 1px;
}

.content-main {
  display: table-row;
  background: blue;
  min-height: 100%;
}

.content-footer {
  display: table-row;
  background: pink;
  height: 1px;
}

Answer 1

经过大量的实验和调查后，我认为我的问题基本归结为希望有一个自动填充所有可用高度的元素（.Content-main）。

对于IE9 +，只有css是不可能的。但是可以使用flexbox或javascript来完成。但这不是我的问题的答案。所以真正的答案是，这是不可能的。