物化 CSS |页脚

页脚是在页面末尾组织大量站点导航和信息的有效方式。这是用户完成滚动浏览当前页面或正在寻找有关网站的其他信息后查看的地方。

Flexbox 用于构建 html，以便页脚始终位于页面底部。将页面结构保持在三个 HTML5 标签

、

和

中很重要，如下所示。

例子：

HTML

  

  
    The Materialize Footer Example
  
  
  
  
  

  

  
  
  
    
      
        
          
            Footer Content
          
          
            Rows and columns are
            used to organize the footer content.
          
  
        
        
          Links
          
            
              
                Link 1
              
            
            
              
                Link 2
              
            
            
              
                Link 3
              
            
          
        
      
    
    
      
        © 2020 Copyright Text
        
          More Links
        
      
    
  

  

输出：

粘性页脚：无论页面上的内容有多少，粘性页脚始终保留在页面底部。但是这个页脚在内容较多的情况下会被下推，所以和固定页脚不同。将以下代码添加到您的 CSS 文件中。

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

  main {
    flex: 1 0 auto;
  }

例子：

HTML

  

  
    The Materialize Footer Example
  
  
  
  
  
  
  
  
    /* Add CSS for making the
    footer sticky */
    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
  
    main {
      flex: 1 0 auto;
    }
  

  

  
  
  
    
      GeeksforGeeks
    
  
    
      A Computer Science portal for geeks.
    
  
  
  
  
  
    
      
        
          
            Footer Content
          
          
            Rows and columns are
            used to organize the footer content.
          
  
        
        
          Links
          
            
              
                Link 1
              
            
            
              
                Link 2
              
            
            
              
                Link 3
              
            
          
        
      
    
    
      
        © 2020 Copyright Text
        
          More Links
        
      
    
  

  

输出：