📌  相关文章
📜  物化 CSS |页脚

📅  最后修改于: 2021-08-31 08:18:36             🧑  作者: Mango

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

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

、
和
中很重要，如下所示。 


    

    

    

例子：

HTML


  

  
    The Materialize Footer Example
  
  
  
  

  

  
  
  

  

HTML


  

  
    The Materialize Footer Example
  
  
  
  
  
  
  

  

  
  
  

    

      GeeksforGeeks
    

  
    

      A Computer Science portal for geeks.
    

  
  

  
  
  

  

输出：

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

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

  main {
    flex: 1 0 auto;
  }

例子：

HTML 



  

  
    The Materialize Footer Example
  
  
  
  
  
  
  

  

  
  
  

    

      GeeksforGeeks
    

  
    

      A Computer Science portal for geeks.
    

  
  

  
  
  

  

输出：