问答博客资讯标签用户活动
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

纯html静态页面，如何把这个黑色的页脚固定在页面的底部？

头像
swnuv
    3.9k789601510

    图片描述

    用<div style="position:absolute;bottom:0px;left:0px;"></div>没有效果啊

    cssjavascripthtml
    阅读 7.9k
    12 个回答
    得票最新
    头像
    Raymond
      4.3k42963
      ✓ 已被采纳

      还应该有

      width：100%；
height： ？？？
      头像
      devlee
        1.3k148

        position:fixed

        头像
        inooNgt
          1.4k817

          没有效果可能是因为<div style="position:absolute;bottom:0px;left:0px;"></div>相对于body定位，但是body高度没有铺满整个页面。
          解决方式：

          body,html{
            height:100%;
            margin:0;
            padding:0;
        }
          头像
          小丑
            9171114
            position:fixed;
bottom:0;
            头像
            byuc
              2491314
              头像
              乌鸦
                1.1k6915

                想固定在页面底部使用 absolute，想固定在窗口底部使用 fixed

                absolute 是相对于第一个不是 static 的父容器定位的，不生效看一下这个容器的位置、大小。截图看样子像是高度没有到 100%

                头像
                逆风一战九
                  10921326

                  fixed是相对窗口 absolute是相对最近父级的relative 你改成position:fixed bottom:0 就可以了

                  头像
                  菜lee
                    7321330

                    不建议fixed，可以这样尝试这样

                    
    <div style="min-height:100%;margin-bottom:-30px;"></div>
    <div style="height:30px;"></div>
                    头像
                    kindleLee
                      1981413
                      头像
                      林小志
                      4.4k2218

                      不知道上面各位说不推荐使用 position: fixed; 的原因是什么，不过如果不考虑 IE6 的话，用这个真的还不错，然后如果不考虑移动端中，有输入框在被 position: fixed; 操作的元素中的话，其实这个真的很方便。

                      当然了，如果一定是要用 position: absolute; 的话，需要注意这个绝对定位的父级元素是什么，因为绝对定位是根据父级元素来操作的。

                      假设那个底部元素的父级是 <body> 的话，那么你需要让 body 和 html 这两个标签的最小高度为 100%，要不然的话。而且有一些细节你也要注意，比如定位后，是否需要留出空白区域什么的。

                      头像
                      花式抖腿冠军
                        1173
                        position:fixed;
                        头像
                        mengdu
                          2.2k104663

                          来一个很实用的方法，自动黏贴底部，如果中间有内容会自动把footer挤到底下，若果内容不及沾满屏幕，footer会自动在屏幕底部：

                          <!-- 
底部自动黏贴布局，当内容高度大于当前视窗时，底部自动留在底部而不是黏贴
-->
<template>
    <div class="m-stick-footer-wrapper">
        <div class="m-stick-footer-container" >
            <!--中间内容-->
        </div>
        <div class="m-stick-footer">
            <!--底部内容-->
        </div>
    </div>
</template>
<style type="text/css">
.m-stick-footer-wrapper{
    padding: 0;
    margin: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}
.m-stick-footer-container{
    width: 100%;
    min-height: calc(100% - 50px);
    box-sizing: border-box;
    overflow: hidden;
}
.m-stick-footer{
    height: 50px;
    background: #F5F7FF;
    overflow: hidden;
}

                          主要的是这句： min-height: calc(100% - 50px);

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