我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm),有一个脚注,我不能坐在页面的底部。

我想让页脚

当页面较短且屏幕未被填充时,坚持在窗口底部 当有超过一个屏幕的内容时,保持在文档末尾,并像往常一样向下移动(而不是重叠内容)。

CSS是继承的,让我困惑。我似乎不能正确地改变它,把一个最小高度的内容或使页脚到底部。


当前回答

动态一行使用jQuery

我遇到的所有CSS方法都太死板了。此外,如果页脚不是设计的一部分,那么将它设置为fixed也是不可取的。


测试:

铬:60 FF: 54 即:11

假设如下布局:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

使用下面的jQuery函数:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

它所做的是将#content的min-height设置为窗口高度-页脚的高度,无论当时可能是什么。

由于我们使用min-height,如果#content height超过窗口高度,该函数将优雅地降级,并且不会产生任何影响,因为不需要它。

看看它的实际应用:

$("#fix").click(function() { $('#content').css("min-height", $(window).height() - $("#footer").height() + "px"); }); * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #111; } body { text-align: center; background: #444 } #content { background: #999; } #footer { background: #777; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="content"> <p>Very short content</p> <button id="fix">Fix it!</button> </div> <div id="footer">Mr. Footer</div> </body> </html>

JsFiddle上的相同片段


奖金:

我们可以更进一步,让这个函数适应动态的查看器高度调整,如下所示:

$(window).resize(function() { $('#content').css("min-height", $(window).height() - $("#footer").height() + "px"); }).resize(); * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #111; } body { text-align: center; background: #444 } #content { background: #999; } #footer { background: #777; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="content"> <p>Very short content</p> </div> <div id="footer">Mr. Footer</div> </body> </html>

其他回答

我认为你可以将主要内容设置为视口高度,所以如果内容超过,主要内容的高度将定义页脚的位置

* { 保证金:0; 填充:0; 宽度:100%; } 身体{ 显示:flex; flex-direction:列; } 标题{ 高度:50 px; 背景:红色; } 主要{ 背景:蓝色; /*这是最重要的部分 身高:100 vh; } 页脚{ 背景:黑色; 高度:50 px; 底部:0; } <标题> < /头> 主要主要< > < / > <页脚> < /页脚>

位置固定,底部,左边和右边设置为0最适合我:

.footer {    
    position: fixed;
    background : #d1ccc0;
    bottom : 0;
    left : 0;
    right : 0;
    height : 50px;
}

绝对位置不会粘在底部,但固定位置会。

从IE7开始,你可以简单地使用

#footer {
    position:fixed;
    bottom:0;
}

参见caniuse寻求支持。

然而,另一个非常简单的解决方案是:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

js小提琴

诀窍是使用display:table表示整个文档,使用display:table-row(高度为0)表示页脚。

由于页脚是唯一显示为表行的子主体,因此它呈现在页面底部。

一个非常简单的跨浏览器工作的方法是:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } <div id="container"> <div id="header">header</div> <div id="body">body</div> <div id="footer">footer</div> </div>