页脚粘在底部，内容包装器填充自由空间

Question

我正在处理网络布局：

1. 页眉和页脚应为全宽，内容窄且居中
2. 页脚位于屏幕底部或页面底部，具体取决于内容长度
3. 如果内容没有填满整个屏幕，其包装应该会填满整个屏幕



前两点没问题，但到现在为止我只能使用Javascript拉伸身体。 CSS min-height: 100%不起作用，是否有可能在纯CSS中解决这个问题？

这个场景的a Fiddle包括一个快速而肮脏的jQuery解决方案。

Answer 1

Demo Fiddle

HTML

  <div class='table'>
    <div class='row'>
        <div class='cell'></div>
    </div>
    <div class='row'>
        <div class='cell'>
            <section></section>
        </div>
    </div>
    <div class='row'>
        <div class='cell'></div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
    width:100%;
    height:100%;
}
.row:first-child, .row:last-child {
    height:50px;
    background:black;
}
.cell {
    display:table-cell;
}
.cell:nth-child(2) {
    text-align:center;
    height:100%;
}
section {
    width:500px;
    margin:0 auto;
    height:100%;
    min-height:100%;
    background:grey;
}

Answer 2

这是你的css.nothing to change ...只是一些编辑..

删除min-height，而不仅仅是height，而对于section的id，只需要height:100%

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}
#layout-helper-wrapper {
height: 100%;
    position: relative;
    margin: 0px auto;
    background-color: #eee;
    overflow: hidden;
}

header, footer {
    background-color: #fb2;
    margin: 0px;
    z-index: 2;
    width: 100%;
    position: absolute;
}
header {
    height: 30px;
}
footer {
    height: 20px;
    bottom: 0;
}

#body-wrapper {
    width: 500px;
    margin: 0px auto;
    background-color: #fff;
    position: relative;
    box-shadow: 0px 0px 8px 3px #aaa;
    padding: 30px 20px 20px;
    overflow: hidden;
    height:100%;
}

http://jsfiddle.net/AJ9hr/11/

Answer 3

我使用这个人的方法使我的页脚粘到底部，用于不填充视口的页面，但是当内容填充视口时，保持在页面的底部（直到向下滚动才可见）。 没有额外的编辑/黑客工作对我来说很好。

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/