详解网站footer沉底效果的三种解决方案

时间：2023-12-15

下面我将详细讲解“详解网站footer沉底效果的三种解决方案”的完整攻略。

什么是网站footer？

首先，我们需要了解什么是网站footer。通常，网站底部都会有一块区域，用于显示一些通用信息，比如网站版权、备案号、联系方式等。这个区域就是网站footer。

什么是footer沉底效果？

footer沉底效果是指，在网页内容较少时，footer可以自动沉底，即出现在浏览器窗口底部。而当内容较多时，footer会随着页面的滚动而跟随滚动。

解决方案一：CSS Sticky Footer

CSS Sticky Footer利用CSS的flex布局，让一些元素（比如没有高度的div）垂直方向上占满整个窗口高度，然后footer使用负边距将自己定位在底部，这样就实现了footer沉底效果。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /*外部容器设置flex布局和column方向，让子元素占满整个容器*/
    html, body {
      height: 100%;
      margin: 0;
    }
    #wrapper {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    /*内容区域自动撑开高度*/
    #content {
      flex: 1;
    }
    /*footer使用负边距定位*/
    #footer {
      margin-top: -50px;
      height: 50px;
      background-color: #333;
      color: #fff;
      text-align: center;
      line-height: 50px;
      width: 100%;
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
<div id="wrapper">
  <div id="content">
    <!-- 页面内容 -->
  </div>
  <div id="footer">
    版权所有
  </div>
</div>
</body>
</html>

解决方案二：JavaScript Sticky Footer

如果要支持老的浏览器（比如IE8）或者希望更灵活地控制footer的行为，可以采用JavaScript实现。具体方法是，获取窗口高度和内容区域高度，判断是否需要将footer定位在底部，然后使用相应的CSS属性实现定位。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #footer {
      height: 50px;
      background-color: #333;
      color: #fff;
      text-align: center;
      line-height: 50px;
      width: 100%;
      position: absolute;
      bottom: 0;
    }
  </style>
  <script>
    function sticky_footer() {
      //获取窗口高度和内容区域高度
      var window_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      var content_height = document.getElementById('content').offsetHeight;
      //判断是否需要将footer定位在底部
      if (window_height > content_height) {
        document.getElementById('footer').style.position = 'absolute';
        document.getElementById('footer').style.bottom = '0';
      } else {
        document.getElementById('footer').style.position = 'static';
      }
    }
    //页面加载时和窗口大小改变时执行sticky_footer函数
    window.addEventListener('load', sticky_footer);
    window.addEventListener('resize', sticky_footer);
  </script>
</head>
<body>
<div id="content">
  <!-- 页面内容 -->
</div>
<div id="footer">
  版权所有
</div>
</body>
</html>

解决方案三：CSS Grid Sticky Footer

我们也可以使用CSS Grid来实现sticky footer。具体方法是，利用CSS Grid的自动布局机制，将网页分为三个部分：头部、内容区域和footer。头部和内容区域利用grid-template-rows属性自适应高度，footer利用grid-template-rows和grid-row-start属性定位在底部。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /*使用grid布局，并将整个网页分为三个部分*/
    #wrapper {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100%;
    }
    /*头部和内容区域自适应高度*/
    #header {
      background-color: #ccc;
    }
    #content {
      background-color: #fff;
    }
    /*footer定位在底部*/
    #footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      line-height: 50px;
      grid-row-start: 3;
      grid-row-end: 4;
    }
  </style>
</head>
<body>
<div id="wrapper">
  <header id="header">
    <!-- 头部内容 -->
  </header>
  <div id="content">
    <!-- 页面内容 -->
  </div>
  <footer id="footer">
    版权所有
  </footer>
</div>
</body>
</html>

以上就是网站footer沉底效果的三种解决方案及示例代码。希望能对您有所帮助。

上一篇：前端实现弹幕效果的方法总结(包含css3和canvas的实现方式) 下一篇：css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式

详解网站footer沉底效果的三种解决方案

什么是网站footer？

什么是footer沉底效果？

解决方案一：CSS Sticky Footer

解决方案二：JavaScript Sticky Footer

解决方案三：CSS Grid Sticky Footer

相关文章