在内容很少的页面上强制页脚底部
Posted
技术标签:
【中文标题】在内容很少的页面上强制页脚底部【英文标题】：force footer on bottom on pages with little content 【发布时间】：2013-05-16 18:14:12 【问题描述】：我的页面只有几行内容。我希望将页脚推到底部。
<div id="footer"></div>
我不想使用
#footer
position:fixed;
bottom:0;
又名 粘滞页脚
如果没有 jQuery，这可能吗？
有什么建议吗？
【问题讨论】：
【参考方案1】：这个Flexbox 解决方案更简洁，更易于实施：
html
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
html, body
height: 100%;
body
display: flex;
flex-direction: column;
.content
flex: 1 0 auto;
.footer
flex-shrink: 0;
只需确保将必要的 divs 包裹在 body 中即可。
【讨论】：
这应该是公认的答案。 Flexbox 是解决这个页脚问题的正确方法。它仍然允许您将页脚保留在包装 div 中（这是一种标准设计实践），并且绝对可以防止您做出荒谬的解决方案，例如将页脚的位置设置为绝对位置。 这应该是公认的答案。易于实现，简单，对现有代码的更改很少，适用于 Bootstrap。 虽然它应该是被接受的答案，但我不确定它是否可能是在发布接受的答案时。这个问题只能追溯到当前 Flexbox 规范之后的一年。不确定浏览器是否支持。【参考方案2】：2021 年更新 - CSS 网格
这是一个使用 CSS Grid 的解决方案，这是 2021 年迄今为止最好的方法。
html, body
margin: 0;
height: 100%;
body
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
grid-template-areas: "main" "footer";
grid-template-rows: 1fr 80px;
main
background-color: #F8BBD0;
grid-area: main;
footer
background-color: #7E57C2;
grid-area: footer;
<body>
<main>The content</main>
<footer>Footer</footer>
</body>旧答案
Ryan Fait 的另一个 sticky footer 不使用固定位置：
*
margin: 0;
html, body
height: 100%;
.wrapper
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
.footer, .push
height: 155px; /* .push must be the same height as .footer */
【讨论】：
这是一个很棒的纯 CSS 解决方案。如果内容高度大于浏览器窗口，页脚将停留在内容下方，但如果内容较少，页脚将停留在浏览器窗口底部。 在 ie8 中效果很好。试试吧。我不确定为什么 IE8 有时会出现负边距问题而不是其他问题，但它似乎受到构建不良的 html/css 的影响。 可以通过在主包装器内的包装器上使用 :after 选择器然后删除推送元素来改进此方法。支持ie8+ 可变高度页脚怎么样？ 这不是一个完整的例子。我不知道在哪里放置.push 以及.wrapper 是否包含.footer。如果您解决此问题，我将删除我的反对票。【参考方案3】：
这是一个不需要将页脚放置在主包装元素之外的解决方案，这是大多数人构建页面的方式。
html,
body
margin: 0;
height: 100%;
.wrapper
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
header
background-color: #cff;
footer
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>说明
包装元素将填充 100% 的视口高度。 （如果您不想设置 html 和 body 元素的高度，也可以使用 100vh 作为包装器。）包装器还有一个底部填充，用于为页脚创建一个占位符。
页脚绝对位于包装器的底部，并位于包装器底部填充创建的占位符中。
这意味着当页面没有滚动条时，页脚将位于最底部。但是，当有足够的内容可以显示滚动条时，页脚将被向下推到内容下方。
（显然，示例中的color 和background-color CSS 属性仅用于装饰。包含它们是为了在运行代码时可以清楚地看到分隔的部分。）
【讨论】：
【参考方案4】：试试 Steve Hatcher 的粘性页脚解决方案
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
*
margin: 0;
padding: 0;
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body
height: 100%;
#wrap
min-height: 100%;
#main
overflow: auto;
padding-bottom: 180px;
/* must be same height as the footer */
#footer
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
/*Opera Fix*/
body:before
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap display:table;height:100%
</style>
<![endif]-->
*/
【讨论】：
链接已损坏。 避免该链接。我已经进行了编辑以供审核。截至 2017 年 11 月，它被重定向到那些声称您的计算机有病毒等的诈骗页面。 为什么我们总是在这个 sn-p 中引用“steve hater”，就好像它是名人什么的？我不知道我们可以永远将我们的签名添加到这样的 sn-p【参考方案5】：我尝试了很多方法，但无论页面是否完全填满，结果都不同。最简单有效的解决方案是使用 flex。
html, body height: 100%;
body display: flex; flex-direction: column;
.content flex: 1 0 auto; padding: 20px;
.footer flex-shrink: 0; padding: 20px;<div class="content">
<h1>The GOAT Footer with Flexbox</h1>
<p>You can add content to test with a full page</p>
</div>
<footer class="footer">
The GOAT Footer
</footer>感谢CSS Trick
【讨论】：
谢谢你的简单，并适用于具有不同需求的多种类型的页面！【参考方案6】：如果您不知道页脚大小，另一种方法是使用 javascript 和 css
html, body
height:100%;
height:100%;
#footer
background-color: #292c2f !important;
position:absolute;bottom:0px;
和 Javascript 部分
$(document).ready(function()
if ($(document).height() > $(window).height())
$('#footer').css('position', 'relative');
);
您可以通过在页脚标签之前的标签上设置 min-height 轻松地使用另一种方法来做到这一点。
.the-tag-before-footer
min-height:30%;
【讨论】：
【参考方案7】：首先将所有主要内容包装在一个 div 元素中，并给它一个“包装器”类（或任意命名）。
HTML：
<body>
<div class="wrapper">
<h1>Main Content</h1>
</div>
<footer>
<p>Footer Content</p>
</footer>
</body>
现在，确保为页脚设置高度。
然后使用 calc() 函数将包装器的高度设置为等于视口（显示）的高度减去页脚的高度。
.wrapper
min-height: calc(100vh - 50px);
footer
height: 50px;
现在，如果您的包装内容有额外的边距，您将不得不增加从视口高度减去的像素数量以反映这一点。除此之外，这是一个超级简单和快速的修复。不需要 javascript，只需要两个 CSS 规则。
【讨论】：
【参考方案8】：对于任何使用 Bootstrap 4 或更高版本的人来说，这个问题都很容易解决，只需在您的网站上包含这个 sn-p：
<script>
$(document).ready(function()
if ($('body').height() < $(window).height())
$('footer').addClass('position-absolute bottom-0');
else
$('footer').addClass('position-static');
);
</script>
这里我们检查 BODY 标签的高度是否小于浏览器窗口的高度，如果为正，我们将页脚放在页面底部，如果为负，我们将页脚设置为静态，它会保持在原来的位置.你不需要改变你当前的代码，你只需要在你的页面或包中包含这个javascript，记住<body>标签必须有位置：相对，如果你没有改变标签的“位置” CSS <body> 中的属性，你不需要做任何事情，因为它是默认值。
<footer> 标记，则应根据需要更改$('footer') 选择器。
【讨论】：
以上是关于在内容很少的页面上强制页脚底部的主要内容，如果未能解决你的问题，请参考以下文章