CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

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

我想让页脚

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

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

当前回答

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

footer {
    position: relative;
    clear: both;
}

2021-12-17 21:14:01

其他回答

动态一行使用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>

2017-09-06 06:58:54

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

2018-01-16 14:46:04

我一直在调查这个问题。我见过不少解决方案，每一个都有问题，通常涉及一些神奇的数字。

因此，我从各种来源的最佳实践中得出了这个解决方案:

http://jsfiddle.net/vfSM3/248/

我想在这里实现的事情是让主要内容在绿色区域内的页脚和页眉之间滚动。

这是一个简单的CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

2013-09-26 17:09:45

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

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

参见caniuse寻求支持。

2013-07-23 09:35:37

使用Flexbox保持页脚在底部

< div风格= "最小高度:100 vh;显示:flex;flex-direction:列; justify-content:之间的空间;" > < div > < !——包装(不带页脚)——> <标题> 我是头。头> < / 文章< > 我是一篇文章! < / >的文章 < / div > < !——结束:包装器(没有页脚)——> <页脚> 我是一个脚注。 > < /页脚 < / div >

Note

确保你将所有内容包装在<div>或任何其他块级元素中，使用以下CSS样式:显示:flex;flex-direction:列;justify-content:之间的空间;．确保在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。确保您使用<footer>或任何其他块级元素来包装页脚。

代码的解释

Min-height: 100vh确保主体元素至少伸展到屏幕的全部高度 Flex-direction:列在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。对齐-内容:空格将页脚推到屏幕底部。

检查如何做同样的(保持页脚在底部)通过使用引导5 -链接

2021-06-05 06:20:53

CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

推荐文章

最新文章

标签