Javascript Flexbox粘性页脚和具有动态高度的容器

我有一个页面，有左栏和右栏，底部有一个页脚。右栏将有溢出的内容。我需要这个容器有滚动条，而不是整个机构，以便页脚将留在底部，用户将通过右栏内容滚动

我还需要动态高度，这样当用户调整窗口大小时，页脚将停留在底部，右侧列的大小将改变。我知道我需要$window.resize来实现这一点，但我不确定到底要在函数中放入什么

有人能帮我吗

这是我的密码笔

---

将主体的外部容器设置为flexbox父容器，并将方向设置为垂直向下流动，以便将页脚固定到底部

这里有一个快速而肮脏的解决方案：

---

您可以基于视口指定大小值，这样您可以有更多的控制。在您的具体案例中，我尝试了以下方法：

body{width:100vw; height:100vh; overflow:hidden}
#top {  
  display: flex;

  .left-column {
    background: lightgreen;
    flex: 1;
    padding: 20px;
    height:85vh;
    overflow:hidden;
  }

  .right-column {
    display: flex;
    flex: 3;
    flex-direction: column;
    height:90vh;


    header {
      background: coral;
      padding: 20px;
    }

    > div {
      background: lightblue;
      overflow-y: scroll;

      p {   
        padding: 20px;      
      }
    }    

  }

}

.footer {
  flex: 1;
  display: flex;
 height:10vh;

  .footer-left {
    flex: 1;
    background: pink;
    padding: 20px;
  }

  .footer-right {
    flex: 3;
    background: plum;
  }

}

---

这似乎有效，但我不确定这是否是你想要的。我希望您能看到它，但由于CodePen使用iFrame，并且iFrame不能很好地使用视口大小，因此您需要自己在真实页面上进行测试

这就是我需要的！非常感谢。

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

body {
    display: flex;
    flex-direction: column;
}

body{width:100vw; height:100vh; overflow:hidden}
#top {  
  display: flex;

  .left-column {
    background: lightgreen;
    flex: 1;
    padding: 20px;
    height:85vh;
    overflow:hidden;
  }

  .right-column {
    display: flex;
    flex: 3;
    flex-direction: column;
    height:90vh;


    header {
      background: coral;
      padding: 20px;
    }

    > div {
      background: lightblue;
      overflow-y: scroll;

      p {   
        padding: 20px;      
      }
    }    

  }

}

.footer {
  flex: 1;
  display: flex;
 height:10vh;

  .footer-left {
    flex: 1;
    background: pink;
    padding: 20px;
  }

  .footer-right {
    flex: 3;
    background: plum;
  }

}