Question

我试图按照以下方式定位页脚（#footer）：

必须有一个

 margin-top: 50px;

到上面的div（#content）但是如果上面的div在显示中（例如在中间），页脚应该至少

 bottom:-100px;

如果上面的div（#content）也在显示之外（低于底部-100px），则页脚应位于该div之下。

这可能吗？（如果jq / js没有别的办法）

提前感谢您的帮助

JSFIDDLE示例： http://jsfiddle.net/nU7Vh/1/ 如果#content的高度是例如300，那么一切都可以，但是如果#content（可以有可变大小，导致它被查询的列表）大于#footer不在#content下显示

Answer 1

您可以使用包装元素（ min-height:100% ），而不使用绝对定位。

<强> HTML

<div class="wrap">
    <div id="content"></div>
</div>
<div id="footer"></div>

CSS

html,body{height:100%;}
.wrap{min-height:100%;}

http://jsfiddle.net/gaby/rXZkx/

演示

Answer 2

1。从#footer删除以下两行：

position:absolute;
bottom:-100px;

2。将容器div添加到#content，其中（与#content不同，可能有任何高度），其min-height为<div id="meta_content"> <div id="content"> </div> </div> 100％屏幕（如果您愿意，您当然可以将 100％更改为不同的百分比）。

min-height

3。添加此CSS，使html, body { height:100%; } #meta_content { min-height:100%; }魔法发生：

{{1}}

<强> jsFiddle demo.

Answer 3

您必须配置一个周围的元素（例如HTML）以至少填充窗口的高度，并允许内部元素（例如BODY）在更高的时候溢出：

<强> CSS

html, body {
    margin: 0;
    padding: 0;
}
html {
    height: 100%; /* fill up window height and let body overflow if higher */
}
body {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px; /* space for footer */
    box-sizing: border-box; /* padding should not be added to height, but included in height */
}
#content {
    height:200px;
    width:500px;
    background: blue;
    opacity: 0.5;
}
#footer {
    height: 18px;
    width: 500px;
    position:absolute;
    bottom: 0px;
    background: red;
    opacity: 0.5;
}

http://jsfiddle.net/x4TPf/

CSS页脚位置

3 个答案: