具有可变高度的粘滞页脚 [英] Sticky footer with a variable height

问题描述

我知道有很多相同的主题，但是有没有任何CSS方式，以一个高度在％的底部，而不会溢出的身体和标题，因为绝对位置的底部？

I know there is a lot of same topics, but is there any CSS way to stick bottom a footer with an height in % without overflowing the body and the header because of absolute position ?

我试图坚持这一个：

html,body{
    height: 100%;
}

#header{
    background-color: yellow;
    height: 100px;
    width: 100%;
}

#holder {
    min-height: 100%;
    position:relative;
}

#body {
    padding-bottom: 100px;
}

#footer{
    background-color: lime;
    bottom: 0;
    height: 100%;
    left: 0;
    position: relative;
    right: 0;
}

使用html：

<div id="holder">
    <div id="header">Title</div>
    <div id="body">Body</div>
    <div id="footer">Footer</div>
</div>

代码： http://jsfiddle.net/TsRkB/

谢谢！

推荐答案

如果你使用display：table作为基础，那么你的粘性页脚可以是任何大小，如果内容增长就会被压下。

if you use display:table as a base , then your sticky footer can be any size and will be pushed down if content grows.

http://dabblet.com/gist/5971212

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    width:80%;
    }
.tr {
    display:table-row;
    background:turquoise
    }
section.tr {
    height:100%;
    background:yellow
    }

<header class="tr"> <h1>title</h1><p>make me grow</p></header>
<section class="tr"><article>article</article></section>
<footer class="tr"> <p>Footer</p><p>make me grow</p></footer>

这篇关于具有可变高度的粘滞页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！