How do I make my panel to fill the screen down to the footer?

前端未结

关注

 1  1583

南笙 2021-01-26 11:58

I want my panel to take up all the screen until the footer even if the panel is empty. If the panel is filled I want to scroll to see the content, but the footer should always b

1条回答

爱一瞬间的悲伤 (楼主)

2021-01-26 12:40

Bootstrap has removed all the variants of *-xs-* classes. Instead of, col-xs-12, use col-12. Since the column is 100% for all sizes, it is enough to use col-12.

Use d-flex flex-column h-100 for the parent of the row.
Use flex-grow-1 for the row.
All the parents of row must have 100% height including body and html.
col-12 and panel must have 100% height.
Use a row for the footer.
Do not change position of footer: remove position: absolute; bottom: 0;right: 0;

html,
body {
  height: 100%;
}



  
    
      
        
          
            Result
          
        
        
          
            test
          
        
      
    
  

  
    
      
        number of results : 55

You can use container instead of container-fluid. It does not make any difference. Buy if you do so,remove the container that is in the footer.

html,
body {
  height: 100%;
}



  
    
      
        
          
            Result
          
        
        
          
            test
          
        
      
    
  

  
    
        number of results : 55

0 讨论(0)