把footer始终固定在页面底部

最新推荐文章于 2022-05-25 08:45:01 发布

太多.梦想.完成

最新推荐文章于 2022-05-25 08:45:01 发布

阅读量1.1k

点赞数 1

分类专栏：前台文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_44153063/article/details/118912725

版权

前台专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS实现使footer始终保持在页面底部的布局技巧，包括使用fixed定位、padding/margin属性、min-height结合calc属性等方法，并提供了详细的代码示例和升级版解决方案，适用于网页设计中常见的底部布局需求。

摘要由CSDN通过智能技术生成

使用fixed属性可以实现，但是会使footer悬浮在页面底部
还有其它的方法,

利用padding和margin属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    html,
    body { height: 100%; padding: 0; margin: 0; }
    .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
    .A { height: 100px; margin-top: -100px; background: #BBE8F2; }
    .B { height: 100%; background: #D9C666;position: relative;padding-bottom: 60px;box-sizing: border-box;    }
  </style>
</head>
<body>
<div class="outer">
  <div class="A">头部DIV</div>
  <div class="B">
下部DIV
  </div>
</div>
</body>
</html>

效果图
在这里插入图片描述

升级版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    html,
    body { height: 100%; padding: 0; margin: 0; }
    .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
    .A { height: 100px; margin-top: -100px; background: #BBE8F2; }
    .B { height: 100%; background: #D9C666;position: relative;padding-bottom: 60px;box-sizing: border-box;    }
    .C{
        height: 100%;
    }
    .footer{
        margin-bottom: 60px;
        position: relative;
        height: 60px;
        background: red;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="A">头部DIV</div>
  <div class="B">
      <div class="C">下部DIV</div>
      <div class="footer">

      </div>
  </div>
</div>
</body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html,body{height:100%;margin:0;padding:0;}

    .container{min-height:100%;}
    header{background-color: #ffe4c4;}
    main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
    footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}/* margin-top（负值的）高度等于footer的height值 */
</style>
<body>
<div class="container">
    <header>header</header>
    <main>main content</main>
</div>
<footer>footer</footer>
</body>
</html>

利用calc属性(推荐，易理解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三层</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  html,body{
    height: 100%;
  }
  .main{
    height: 100%;
    box-sizing: border-box;
  }
  .header{
    background: #9059FF;
    height: 60px;
  }
  .content{
    background: red;
    min-height: calc(100% - 120px);
  }
  .footer{
    background: green;
    height: 60px;
  }
</style>
<body>
<div class="main">
  <div class="header">
    Header
  </div>
  <div class="content">
    content
  </div>
  <div class="footer">
    Footer
  </div>
</div>
</body>
</html>

效果图
在这里插入图片描述

太多.梦想.完成

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
把footer始终固定在页面底部

使用fixed属性可以实现，但是会使footer悬浮在页面底部还有其它的方法,利用padding和margin属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { height: 100%; padding: 0; margi
复制链接

扫一扫