Question

我有一个左右列的页面，底部有一个页脚。右栏将包含溢出的内容。我需要这个容器有滚动条而不是整个主体，因此页脚将保持在底部，用户将滚动右列内容。

我还需要动态高度，因此当用户调整窗口大小时，页脚将保持在底部，右列的大小将会改变。我知道我需要$（window）.resize（），但我不确定该函数究竟放入了什么。

有人能帮助我吗？

这是我的代码集http://codepen.io/amwill/pen/lmAzb

#top {  
  display: flex;

  .left-column {
    background: lightgreen;
    flex: 1;
    padding: 20px;
  }

  .right-column {
    display: flex;
    flex: 3;
    flex-direction: column;    

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

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

      p {   
        padding: 20px;      
      }
    }    

  }

}

.footer {
 flex: 1;
  display: flex;

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

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

}

Answer 1

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

这是一个快速而肮脏的解决方案：http://codepen.io/anon/pen/uzexD

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

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

Answer 2

您可以根据视口指定大小值，这样您就可以获得更多控制权。在你的具体情况下，我试过这个：

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

}

它似乎有效，但我不确定这是否是您正在寻找的。我forked your codepen所以你可以看到它，但由于CodePen使用iframe和视口大小对iframe不起作用，你需要自己在真实页面上进行测试

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

2 个答案: