我正在使用Bootstrap 4(现在我正在使用alpha-6).

我有这种情况:

  

  


    


      

        My header
      

    

    

      Nav bar
    

    

      

        


          

            

              

                Card Header
              
              

                FIRST LINK
                Dapibus ac facilisis in                    
                Dapibus ac facilisis in
                Morbi leo risus

                LAST LINK
              
              

                Card Footer
              
            
          

          

            
FIRST LINE
 So many words, so many words. So many words, so many words. So many words, so many words.
            
 So many words, so many words. So many words, so many words. So many words, so many words.
            
 So many words, so many words. So many words, so many words. So many words, so many words.
            

            
LAST LINE
          

        
      
    

    

      Footer
    

  

  

这是css:

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
}

plnkr上有一个DEMO:https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3

当页面内容为空时,我需要页脚在底部,因此我正在使用:.bigone { height: 100vh; }和Bootstrap Flexbox对齐实用程序,如:

height: calc(100vh - header.height - footer.height - etc...);

.main {
    flex: 1 1 0; /* flex: 1, which you had before, is equivalent but doesn't work */
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
    display: flex;
}
.col-6 {
    overflow-y: auto;
}