如何设置页面底部页脚？

HTML 元素 <footer> 充当与其最近的相对元素的页脚，该元素要么是分段内容，要么是分段根元素。<footer> 通常包含有关该部分作者、版权信息或相关论文链接的信息。让我们看一下 <footer> 元素的简单示例。

<footer>
   Some copyright info or author info
</footer>

将页脚设置为页面底部

制作一个始终位于网站页面底部的页脚我们可以调整它在页面底部的位置，以便即使您向下滚动页面也可以看到页脚。使用 position: fixed 创建一个始终显示在页面底部的页脚。

语法

以下是将页脚设置为页面底部的语法 -

#footer {
   position: fixed;
   width: 100%;
   height: 35px;
}

为了更好地理解如何在页面底部设置页脚。让我们看一下以下示例。

示例

在以下示例中，我们创建一个网页，其中我们使用 position: fixed 属性将页脚添加到网页底部。

<!DOCTYPE html>
<html>
   <style>
   #tutorial{
      background:#D5F5E3;
   }
   #tutorial1 {
      position: fixed;
      padding: 10px 10px 0px 10px;
      bottom: 0;
      width: 100%;
      height: 40px;
      background: #D7BDE2 ;
   }
   </style>
   <body>
      <center>
         <div id="tutorial">
            <h1>TutorialsPoint</h1>
            <div id="tutorial1">The Best E-Way Learning.
            </div>
         </div>
      </center>
   </body>
</html>

当脚本执行时，它将生成一个输出，其中包含应用样式的文本，以及充当页脚的文本，该文本将以应用的样式停留在网页底部。

示例

让我们看一下以下示例，其中我们使用 position: absolute 将页脚设置为页面底部。

<!DOCTYPE html>
<html>
   <body>
      <style>
      #container {
         min-height:100%;
         position:relative;
      }
      #tutorial {
         background:#D5F5E3 ;
         padding:10px;
      }
      #tutorial1 {
         padding:10px;
         padding-bottom:60px;
      }
      #tutorial2 {
         position: absolute;
         right: 0;
         bottom: 0;
         left: 0;
         padding: 1rem;
         background-color:#AED6F1 ;
         text-align: center;
      }
      </style>
      <div id="container">
         <div id="tutorial">Choose The Course</div>
         <div id="tutorial1">
            <ol>
               <li>HTML</li>
               <li>JAVA</li>
               <li>PYTHON</li>
            </ol>
         </div>
         <div id="tutorial2">If any doubt contact us at E-mail:tp@welcome</div>
      </div>
   </body>
</html>

当脚本执行时，将出现一个输出窗口，在网页上显示文本和有序列表，以及在网页底部显示并应用了 CSS 样式的页脚文本。

在 HTML 中使用 Flexbox

Flexbox 是一种一维布局技术，用于在行或列中排列对象。项目可以灵活地（扩展）占据更多空间或收缩以适应更紧凑的空间。

示例

考虑以下示例，其中我们使用 flexbox 将页脚设置为网页底部。

<!DOCTYPE html>
<html>
   <body>
      <style>
      #tutorial{
         background:red;
      }
      #tutorial1{
         min-height:100px;
         display:flex;
         flex-direction:column;
         justify-content:space-between;
      }
      </style>
      <div id="tutorial1">
         <div>
            <header>
            JamesCameron
            </header>
            <article>
            Directed Avatar2
            </article>
         </div>
         <footer id="tutorial">
            Avatar2 2022©
         </footer>
      </div>
   </body>
</html>

运行上述脚本后，将弹出输出窗口，显示文本和应用了 CSS 并显示在网页底部的页脚文本。

更新于：2023 年 4 月 20 日

1K+ 次查看

开启你的 职业生涯

完成课程获得认证

开始学习
广告