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

Question

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

情况1 ：

第一种情况是身体内容不足以填满浏览器的高度，因此页脚必须固定在浏览器的底部。

情况2 ：

第二种情况是身体内容物的高度越高并溢出。在这里，我不希望页脚固定在底部，因此页脚必须位于内容的底部。

第一种方法和与小提琴示例的链接在上面的链接中来自另一篇文章。

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

Answer 1

我建议使用嵌套的flexbox，例如：

<强> jsFiddle

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;