Set max-height to fill all the available space

Question

My web application has some areas placed in the page. Basically:

  
       <-- top nav bar
  
        <-- breadcrumb
  <         


        

Answer 1

I think you'd want to use flexbox for this...

  
       <-- top nav bar -->
  
        <-- breadcrumb -->
  
       <-- row with buttons -->
  

       <-- run-time growing table -->
  
    <-- sticky footer -->




vh-100 - makes the entire body viewport height
d-flex flex-column - make the body display:flex, flex-direction:column
overflow-hidden - prevents the body from scrolling
mt-auto - to make the footer stick the the bottom


Demo: https://www.codeply.com/go/FSrBOdRVFG

Basically this has been answered before:
Bootstrap 4 row fill remaining height

How to make the row stretch remaining height

Bootstrap 4: Scrollable row, which fills remaining height

    

             

                                                        
            
            

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                    
                         

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论 
  
  

                    
                    

                    

                        

                        
                         加载中...
                        
                    
                
          
                              			
        
        
        

          

            
            

              
              

            
    


                                 
              
            
                          
    

        
         

                验证码
                

                  
                
                

                   看不清?
                
              
                                  

                    
   
                 
             
              
提交回复
            
          
        
      
       
      
    
    

          
 
     
 

        
热议问题