在某些条件下，底部的CSS页脚 [英] CSS footer at the bottom with certain conditions

问题描述

是否可以创建位于页面底部的页脚，例如当页面高度为500px时，页脚将停留在该位置，而不是在该高度值之后的底部?

Is it possible to create footer that will be at the bottom of the page and when page height is for example 500px, then footer would stay at that place and not be at the bottom after that height value?

此页脚将始终保持在底部，但是当页面高度低于500px时仍会存在，因此可以使用CSS来制定这样的规则吗?

This footer will stay at the bottom ok, but when page height is under 500px it will still be there, so is it possible to use CSS to make such a rule ?

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

推荐答案

@newbie;可能就是您要做的.

@newbie; may be that's you have to do.

css:

.wrapper {
    position: relative;
    width: 700px;
    font-size: 0.9em;
    margin: 0 auto -142px;
    background:yellow;
}
.header {
    height: 190px;
    background:green;
}

.footer {
    position: relative;
    width: 700px;
    margin: 0 auto;
    background:red;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
.footer, .push {
    height: 142px;
}

检查此示例 http://jsfiddle.net/sandeep/tCdPX/3/

对此进行更多检查 stickyfooter

这篇关于在某些条件下，底部的CSS页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！