CSS footer置底示例

2024-02-15 05:13:40

CSS入门到进阶：4行代码搞定footer置底，从此告别烦恼

在网页设计中，footer（页脚）是网站底部显示信息的区域，通常包含版权信息、联系方式或其他附加内容。对于大多数网站来说，footer置底是一个非常普遍的需求。本文将介绍一种使用4行CSS代码即可轻松实现footer置底的方法，让你的网站更具专业性和美观度。

代码实现

只需添加以下4行CSS代码即可实现footer置底效果：

html {
  height: 100%;
}
body {
  height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 15px;
}

代码解析

html和body的height属性均设置为100%，这意味着它们的高度将占据浏览器窗口的整个高度。
footer类设置了position属性为absolute，使其脱离文档流，并使用bottom属性将其定位在浏览器的底部。
left和width属性分别设置了footer的左偏移量和宽度，使其与浏览器窗口的底部和左侧对齐。
最后，根据需要设置background-color、color和padding等样式，以自定义footer的外观。

实例演示

让我们使用一个简单的HTML文档来演示这个效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <style>
    html {
      height: 100%;
    }
    body {
      height: 100%;
    }
    .footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #333;
      color: #fff;
      padding: 15px;
    }
  </style>
</head>
<body>
  <h1>CSS footer置底示例</h1>
  <p>这是一段正文内容。</p>
  <footer>这是页脚内容。</footer>
</body>
</html>