css实现让页面的footer始终位于底部

最新推荐文章于 2022-11-25 16:36:28 发布

weixin_33971205

最新推荐文章于 2022-11-25 16:36:28 发布

阅读量327

点赞数

原文链接：https://juejin.im/post/5c1077165188251da07e0a81

版权

在写html页面布局的时候经常会遇到这样的情况：当页面内容较少的时候footer下面会有留白这样会很不好看，直接给footer，fixed定位的话当页面内容多的时候，footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。

方法一：position: absolute; bottom:0; + min-height: 100%;padding-bottom:100px;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
      *{
            padding:0;
            margin:0
        }
       html,body{
           height: 100%;
        }
        .page{
            box-sizing: border-box;
            min-height: 100%;
            position: relative;
            padding-bottom:100px;
        }
        header{
            height: 60px;
            background: #333;
        }
        .content{
            background: #666;
            /*height: 1000px;*/
        }
        footer{
            width: 100%;
            height: 100px;
            background: #aaa;
            position: absolute;
            bottom:0;
            left: 0;
        }
  </style>
</head>
<body>
  <div class="page">
    <header> 头部 </header>
    <div class="content">
      <p class="内容区"></p>
    </div>
    <footer> 底部 </footer>
  </div>
</body>
</body>
</html>

复制代码

方法二:其实是对方法一做一些改造，html结构和方法一中的一样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
      *{
            padding:0;
            margin:0
        }
       html,body{
           height: 100%;
        }
        .page{
            min-height: 100%;
            position: relative;
        }
        header{
            height: 60px;
            background: #0d6aad;
        }
        .content{
            background: #00c7a6;
            /*height: 1000px;*/
            padding-bottom:100px;
        }
        footer{
            width: 100%;
            height: 100px;
            background: #1ab7ea;
            opacity: 0.6;
            position: absolute;
            bottom:0;
            left: 0;
        }
  </style>
</head>
<body>
  <div class="page">
    <header> 头部 </header>
    <div class="content">
      <p class="内容区"></p>
    </div>
    <footer> 底部 </footer>
  </div>
</body>
</body>
</html>
复制代码

方法三：使用flexbox布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
      *{
            padding:0;
            margin:0
        }
       html,body{
           height: 100%;
        }
      .page{
          display: flex;
          flex-direction: column;
          height: 100%;
      }
      header{
          height: 100px;
          background: #333;
          flex: 0 0 auto;
      }
      .content{
          background: #666;
          flex: 1 0 auto;
          /*height: 1000px;*/
      }
      footer{
          height: 100px;
          background: #999;
          flex: 0 0 auto;
      }
  </style>
</head>
<body>
  <div class="page">
    <header> 头部 </header>
    <div class="content">
      <p class="内容区"></p>
    </div>
    <footer> 底部 </footer>
  </div>
</body>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5c1077165188251da07e0a81

weixin_33971205

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现让页面的footer始终位于底部

在写html页面布局的时候经常会遇到这样的情况：当页面内容较少的时候footer下面会有留白这样会很不好看，直接给footer，fixed定位的话当页面内容多的时候，footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。方法一：position: absolute; bottom:0; + min-height: 100%;padding-bottom:100px;...
复制链接

扫一扫