当侧边栏超过屏幕高度时，如何使这个粘性页脚粘在布局的底部？答案

【问题标题】：How do I make this sticky footer stick to the bottom of the layout when the sidebar exceeds screenheight?当侧边栏超过屏幕高度时，如何使这个粘性页脚粘在布局的底部？
【发布时间】：2016-01-22 17:13:46
【问题描述】：

我有这种两列布局，具有固定宽度的侧边栏（红色）、扩展的内容区域（蓝色）和粘性页脚（粉红色）。一切都按预期工作，除了粘性页脚。

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

如何确保 .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;
}

【问题讨论】：

页脚不在我电脑的底部。 (Firefox 43.0.4)
所以您是说仅当 .sidebar 超过窗口高度时才希望页脚粘在底部？在这种情况下，将需要一些 Javascript 来测量 .sidebar 高度与窗口高度的关系。如果侧边栏 > 窗口然后将“粘性”类添加到页脚。在页面加载和窗口调整大小时运行代码。
@philtune 好吧，基本上我想要实现的是等高的列（侧边栏和内容），带有粘性页脚和内容主来填充所有可用空间。我只想在 css 中执行此操作。
有点像框架......前几天我使用原生 css calc() 函数做了一个这样的布局。我知道页脚将是 60 像素高，所以我制作了主容器：.main { height: calc(100%-60px); }。 calc() 函数曾经存在性能问题，但我看到人们最近使用它并谨慎使用它。
我认为在没有表格的情况下创建两个具有相同高度的列是 HTML/CSS 中的常见问题。也许你可以创建一个一行两列的表格来解决这个问题。

标签： html css

【解决方案1】：

所以经过大量的实验和调查，我认为我的问题基本上归结为想要一个自动填充所有可用高度的元素 (.Content-main)。

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

【讨论】：