问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css header 固定 footer也固定 怎么实现？

头像
南之默
    726

    这里footer也固定包括两种情况，第一种是当页面内容尚未填充满的时候，页脚需要固定在底部，第二种是页面填充满后，页脚需要随页面内容的增加而填充在主体内容的下方。

    我需求这两种情况结合在一起实现！

    第二张需求单独实现
    <html>
    <head>
    <style type="text/css">
    html,body{height:100%}
    .footer {margin-top:-30px;height:30px;background-color:#eee;}
    .wrap{min-height:100%}
    .main{padding-bottom:30px;overflow:hidden;}
    </style>
    </head>
    <body>

    <div class="wrap">
    <div class="main">这里是网页的主体</div>
</div>
<div class="footer">这里是页脚</div>

    </body>
    </html>

    javascripthtmlcss
    阅读 7.6k
    6 个回答
    得票最新
    头像
    秋水白
      8131516
      ✓ 已被采纳

      可以试试position：fixed;
      footer可以使用绝对定位，相对与page元素，结构比如这样

       <div class="page">
    <div class="header">11111</div>
    <div class="footer">22222</div>
  </div>
       .page{
    position: relative;
 }
.footer{
    position: absolute;
    bottom: 0;
}

      这样footer就一直居于page元素的底部了
      page还要设计一个min-height,值为一开始没内容的时候的高度

      头像
      我养了一窝汪汪
        9741517

        两种都可以用css来实现
        第一种：

         div{height:100%;}
    header{height:50px;}
    div.body{height:calc(100% - 100px);}
    footer{height:50px;}

        第二种：

        div{height:100%;}
    header{height:50px}
    div.body{min-height:1px;}
    footer{height:50px}

        二者结合：

        div{width:100%;height:100%;}
    header{height:50px}
    div.body{min-height:1px;height:auto;max-height:calc(100% - 100px);}
    footer{height:50px}

        html结构

        <html>
    <body>
        <div>
            <header></header>
            <div class="body"></div>
            <footer></footer>
        </div>
    </body>
</html>
        头像
        罗高
          7096

          不考虑兼容性可以用flexbox布局

          也可以看看我之前写过的这篇博客

          头像
          maimai123
            4413

            flex吧 一般这种布局用在手机端

            头像
            nikoohp
              19952331

              css sticky footer布局

              方法一：
              flex

              方法二：

              <div class="wrap">
  <div class="wrap-main">
    <div class="wrap-content">main content</div>
  </div>
  <div class="wrap-footer">footer content</div>
</div>
              .wrap{
    overflow: auto;
  }
  .wrap-main{
    min-height: 100%
  }
  .wrap-content{
    padding-bottom: 100px;
  }
  .wrap-footer{
    margin-top: -100px;
  }
              头像
              岛风风
                4333917

                默认 把footer放在html页面末尾
                写一个class直接绝对定位在 bottom 0 left 0
                js写个定时器，如果页面内容小于游览器高度，就加class 大于就去了class

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题