关于footer置底的好方法？

我想知道大家是怎么实现页脚在内容不够的情况下会放在网页的底部，内容够多的时候放在页面的底部？
使用fix属性会造成遮挡内容。

第二种是footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom：0），父层内要预留footer的高度。这种情况需要知道footer的高度。但是一般情况下是不知道footer的高度的，而且个人不喜欢脱离文档流的做法。

所以有没有可以让footer在内容少的时候停留在屏幕的底部，改变窗口大小出现滚动条而不是被顶起来，内容多的时候在页面底部。不知道footer高度。要是可以不脱离文档流就更好了，感觉脱离文档流之后不太可控

html css

阅读 13.9k

10 个回答

得票最新

brook

3.1k4726

发布于
2016-11-25

✓ 已被采纳

3种方式实现这个

-margin & padding
flex
grid
https://uedsky.com/2016-05/fr...

guangpunba

5.4k42754

发布于
2016-11-24

<style>
        body,
        html {
            padding: 0px;
            margin: 0px;
            height: 100%;
        }

        header {
            height: 40px;
            width: 100%;
            background: #ddd;
            margin-bottom: -40px;
            position: relative;
            z-index: 2;
        }

        footer {
            height: 20px;
            width: 100%;
            background: #000;
            margin-top: -20px;
        }

        .main {
            min-height: 100%;
            width: 100%;
            background: red;
        }

        .main-box {
            padding-top: 40px;
            padding-bottom: 20px;
        }
    </style>
    <header>111111111111111111</header>
    <section class="main">
        <div class="main-box">
            <p>2222222222222222</p>
        </div>
    </section>
    <footer>33333333333333333333</footer>

undefind_5

1.5k1297133

发布于
2016-11-24

第一种：从我的经验来看，如果不能用定位方式（脱离文档流）来居底，单纯的依靠css是不行的，如果内容太少，无法填满窗口，你看到的效果永远是footer在整个内容的中部或者下部，因为内容的高度无法撑满，同时footer在结构上来讲，也是正确的处于文档的末尾的（哪怕你给内容部分添加height:100%也是没什么用处），这种情况下，你可以用js来获取频幕高度，或者窗口高度，然后再动态赋值，修改footer的margin或者pandding(不定位的情况下，定位的情况下，可以绝对定位，这样也不会遮挡到其他元素)。
第二种：实现起来很复杂，同时，算你给它的父元素给了100%的高，还是无用，所以你再absolute还是无用，给外层元素赋值高度，如果不是定值，赋值百分比是无效的，默认是要靠内层的元素来撑的，不知道这个观点你能接受不能？，所以按你的想法，只能尝试相对定位（relative）很显然，相对定位在层级关系复杂的情况下，还没有绝对定位好用（个人观点）。所以，建议你可以用js+绝对定位的方式（直接绝对定义也是个坑，当你页面高度超过100%时你就明白了）

crp205

3.9k3821

发布于
2016-11-24

你的意思是footer始终居底?

<body style="padding-bottom:100px;">
    <main>这是内容区</main>
    <footer style="position:fixed;bottom:0;height:100px;background:red">asda</footer>
</body>
 //这里的footer管你的内容如何变化都是在底部的，但你说footer高度不确定?
 //用一段js获取高度再设定body的padding-bottom就行了

mcfog

21.9k11443

发布于
2016-11-24

是指内容不满一屏的时候跟着内容，超过一屏的时候固底么？因为css很难对“内容高度”作出反应，一般的方法还是辅助js实现，注意考虑内容高度变化／窗口尺寸变化的场景就好

顺带一提，移动优先的现在，还是尽量避免用footer呈现内容／导航／按钮，尤其是有输入的时候，处理不同平台输入法弹起的问题真是一地鸡毛

星痕

24211526

发布于
2016-11-24

sass compass
@import "compass/layout"

@include sticky-footer(footer-height(px),"content-class”，“bump-class”,"footer-class")

原理基本上是创建一个占满屏幕的盒子，然后通过margin-top 负值让底部空出一部分，然后用footer去填充
html:
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="stylesheets/common.css">

</head>
<body>

<div class="content">sss
    <div class="test"></div>
</div>
<div class="footer">sss</div>

</body>
</html>
.content {
clear: both;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -40px; }
/ line 18, ../../../../tools/koala/Koala/rubygems/gems/compass-core-1.0.1/stylesheets/compass/layout/_sticky-footer.scss /
.content .test {

height: 40px; }

/ line 20, ../../../../tools/koala/Koala/rubygems/gems/compass-core-1.0.1/stylesheets/compass/layout/_sticky-footer.scss /
.footer {
clear: both;
position: relative;
height: 40px; }

css

linong

29.2k1266133

发布于
2016-11-25

更新于
2016-11-25

谢邀。纯css的我感觉这个不现实。

先说说为什么不现实，显示器有宽屏有竖屏，这一点，你就没办法解决。
如果实在想做用js。获取你视口的高度。获取你内容的高度。然后做比较。动态的给你footer一个class。只能这样。

写着写着我就发现我打自己脸了。。。。还有一个办法

position 新属性 -- sticky 兼容性还不是很好。之前是只有火狐兼容。现在好像最新的chrome也可以了。

写完之后看了看一楼的。给body和html设置height:100%;然后通过margin-top去实现也倒是可以。

我理解楼主的意图是当页面实际内容高度小于浏览器窗口高度时，footer对浏览器窗口贴底。当内容实际高度大于浏览器窗口高度时，footer对页面实际内容贴底。可能感觉这里麻烦之处在于两种情况的参考物不一样，而我们写CSS时还只能取一个参考物。我的思路是可以把参考物合并一下，我们只需要让页面实际内容的最小高度等于浏览器窗口高度，那么参考物只取页面实际内容即可。实施方案是在footer上面放一个基础高度为0的弹性夹层。

<style>
    body {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .placeholder {
        flex: 1;
        height: 0;
    }
</style>
<header>111111111111111111</header>
<section class="main">
    <div class="main-box">
        <p>2222222222222222</p>
    </div>
</section>
<section class="placeholder"></section>
<footer>33333333333333333333</footer>

看到有使用-margin的方案，这个会在footer实际内容下面留下一个空白占位。

Quiet

37433145

发布于
2016-11-25

我不太喜欢css的做法，一堆hack太麻烦而且不灵活。
结构：

<div id="page">
    <header id="header"></header>
    <div id="inner"></div>
    <footer id="footer"></footer>
</div>

    var header = $('#header');
    var inner = $('#inner');
    var footer = $('#footer'); 
    var win = $(window);


    function fix_footer(){
        var h = win.height() - header.outerHeight() - footer.outerHeight();
        inner.css({
            minHeight: h < 0 ? 0 : h
        });
    }

    fix_footer();

    win.on('resize',function(){
        fix_footer();
    });

nikoohp

19952331

发布于
2016-11-25

css sticky footer布局

<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;
  }

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

关于footer置底的好方法？

css sticky footer布局

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？