如何设置页面底部的页脚?

htmlweb developmentfront end technology更新于 2024/4/22 6:36:17

HTML 元素 <footer> 充当与其最接近的元素(即节内容或节根元素)的页脚。<footer> 通常包含有关节的作者、版权信息或相关论文链接的信息。让我们来看一个 <footer> 元素的简单示例。

<footer>
一些版权信息或作者信息
</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 并显示在网页底部的页脚文本。