html - 两列布局中的粘性页脚位置

Question

这篇文章是 this one 的更新版本.我将尝试比在其他帖子中更好地解释我的问题。在两种情况下，该问题与页脚的位置有关。

情况一:

第一种情况是body的内容不足以填满浏览器的高度，所以footer必须固定在浏览器的底部。

情况 2:

第二种情况是body内容的高度比较高溢出了。这里我不希望页脚固定在底部，所以页脚必须在内容底部之后。

Fiddle 示例的第一种方法和链接位于另一篇文章的上述链接中。

顺便说一下。我知道这可以使用 Javascript 来完成，但我只想使用 CSS 规则。有什么想法吗？

Answer 1

我建议使用嵌套的 flexbox，示例如下:

jsFiddle

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
.container {
  flex: 1;
  display: flex;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="header">header</div>
<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">
    <div class="main">
      conent<br>conent<br>conent<br>conent<br>conent<br>
      conent<br>conent<br>conent<br>conent<br>conent<br>
      conent<br>conent<br>conent<br>conent<br>conent<br>
      conent<br>conent<br>conent<br>conent<br>conent<br>
     </div>
    <div class="footer">footer</div>
  </div>
</div>