我有以下页面(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>

其他回答

我实现了使用CSS网格,基本上我定义了3行:

头 内容 页脚

并且使用网格来定义大小,诀窍是在行末对齐页脚,像这样:

CSS

body {
    display: grid;
    grid-template-rows: auto auto auto;
}

footer {
    display: grid;
    align-self: end; /* The trick */
}

HTML文件

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <header>
    Header content
  </header>
  
  <h1>main body</h1>
  <p>This is a paragraph.</p>
  
  <footer>
    <p>Hello there.</p>
  </footer>
</body>
</html>

您可以使用更多的行,但请记住将其添加到CSS中,或将所有内容包装在div中。

这篇指南真的帮我找到了答案。

需要警惕的一件事是移动设备,因为它们以一种“不寻常”的方式实现视口的想法:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此,使用位置:固定;(正如我在其他地方看到的推荐)通常不是正确的方法。当然,这取决于你所追求的具体行为。

我所使用的,并且在桌面和移动设备上运行良好的方法是:

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

with

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}
 
#footer {
    position: absolute;
    bottom: 0;
}

虽然我找到了许多类似的答案,但我能找到的唯一解决方案是,页脚总是在底部,不显示在现有数据之上:

footer {
    position: relative;
    clear: both;
}

我使用的一个简单的解决方案,从IE8+工作

在html上给min-height:100%,这样如果内容较少,那么页面仍然采用完整的视图高度,页脚贴在页面底部。当内容增加时,页脚随着内容向下移动,并保持贴在底部。

JS小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
footer {
  margin-top:calc(5% + 60px);
}

这很好