内容下方的页脚，但如果内容不足，则不会漂浮在半空中
Posted
技术标签:
【中文标题】内容下方的页脚，但如果内容不足，则不会漂浮在半空中【英文标题】：Footer below content, but not floating mid-air if not enough content 【发布时间】：2014-10-29 12:48:00 【问题描述】：我得到了这个代码：
演示：http://jsfiddle.net/z21nz89d/2/
html：
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
<p>Here comes some content.</p>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>Some footer-content</p>
<p>Some footer-content</p>
<p>Some footer-content</p>
</div>
<div class="col-md-4">
<p>Some footer-content</p>
<p>Some footer-content</p>
</div>
</div>
</div>
</footer>
CSS：
footer
background-color: #eee;
padding-top: 15px;
padding-left: 15px;
这是我所拥有的非常基本的东西，但你会明白的。 如您所见，页脚位于半空中的某处。 我可以将其绝对定位并轻松使其具有粘性，但出于各种原因我不希望这样做。
我希望页脚位于整个内容的下方（可以这么说，列为最后一个），但是，如果没有足够的内容，我需要将页脚放置在底部：0 和左侧：0。
我不知道如何做到这一点。我的第一个猜测是使用 javascript 来查看有多少空间以及该网站是否可滚动。
【问题讨论】：
你解释的是一个粘性页脚。不太确定你想要什么。粘性页脚将页脚放置在内容的底部，除非没有足够的内容来填充窗口的高度；然后将其放置在底部：0，左侧：0。 那么我确实在让它看起来像工作时遇到了问题。 【参考方案1】：如果页脚的高度未知，最好使用flex，类似于：
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
只有 CSS 需要这个：
body
display: flex;
min-height: 100vh;
flex-direction: column;
.content
flex: 1;
而且你不需要将 display:flex 设置为 body，它也可以是 body 内部的包装器。
请记住，这在 IE 上可能无法按预期工作（请参阅下面的 CanIUse 链接）。不过，它现在对大多数人来说都很好用！
CanIUse link 示例见this link。
【讨论】：
2020年完美答案。 这是我要去的地方 谢谢，这对我来说是完美的！ 很好的解决方案！对我来说不是开箱即用的，因为我正在使用 GatsbyJS 构建一个站点，它会生成一些晦涩的 HTML 结构。我丢弃了flex: 1 并在我的身体包装中使用了justify-content: space-between;。做同样的事情。【参考方案2】：
这是我发现制作好的页脚最简单的方法。将除页脚之外的所有内容都包装在“包装器”div 中。然后将您的 html 和正文高度设置为 100%，包装器上的最小高度为 100%。接下来，您需要为此包装器提供与页脚高度相同的底部边距和底部填充。它就像一个魅力。
Demo here
html, body
height: 100%;
.wrapper
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
footer
height: 100px;
【讨论】：
我现在将在我的作品中试一试。非常感谢！ @PhilM。没问题，很乐意提供帮助！ 几年后，您可能知道，使用 flexbox 可以更轻松地解决这个问题。有关更多信息，请参阅我的答案:) 这真的不应该是 2019 年的最佳答案 :) 为 Flexbox/Grid 投票【参考方案3】：这里有弹性位置的解决方案： https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
【讨论】：
【参考方案4】：您可以使用此响应式 css 代码，它适用于所有浏览器，当浏览器可以调整大小时，它可以根据浏览器大小进行更改。
Live Working Demo
HTML 代码：
<div id="wrapper">
<div id="header">
Header is here
</div><!-- #header -->
<div id="content">
Content is here
</div><!-- #content -->
<div id="footer">
Footer is here
</div><!-- #footer -->
</div><!-- #wrapper -->
CSS 代码：
html,
body
margin:0;
padding:0;
height:100%;
#wrapper
min-height:100%;
position:relative;
#header
background:#ededed;
padding:10px;
text-align:center;
#content
padding-bottom:100px; /* Height of the footer element */
text-align:center;
#footer
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
text-align:center;
结果：
【讨论】：
【参考方案5】：如果你真的想用javascript的方式来做，你可以用这段代码来实现：
http://jsfiddle.net/z21nz89d/6/
$(function()
var windowHeight = $(window).height();
var contHeight = $(".main-container").height();
var footHeight = $("footer").height();
var testHeight = windowHeight - footHeight;
if (contHeight < testHeight)
$("footer").css("bottom", "0");
$("footer").css("left", "0");
);
确保添加以下css规则，HTML、BODY的东西很重要。
html, body
height: 100%;
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
您还必须将除页脚之外的所有上下文包装在一个 div 中，例如“主容器”类，这样您就可以测试整个主体的高度与内容的高度减去页脚，明白吗？
这都是 JSFiddle。
请注意，这真的不是这样做的语义方式。在我看来，一个纯 CSS 粘性页脚会更好。如果你不能使用一个，这将工作。
【讨论】：
【参考方案6】：现在这可以通过position: sticky轻松完成。见this reference：
元素按照文档的正常流程进行定位，然后相对于其最近的滚动祖先和包含块（最近的块级祖先）偏移，包括与表格相关的元素，根据top、right的值、底部和左侧。偏移量不会影响任何其他元素的位置。
这个值总是创建一个新的堆叠上下文。请注意，粘性元素“粘”到其最近的具有“滚动机制”的祖先（在隐藏、滚动、自动或覆盖溢出时创建），即使该祖先不是最近的实际滚动祖先。这有效地抑制了任何“粘性”行为（请参阅 W3C CSSWG 上的 Github 问题）。
Examine this pen 是一个工作示例。
【讨论】：
以上是关于内容下方的页脚，但如果内容不足，则不会漂浮在半空中的主要内容，如果未能解决你的问题，请参考以下文章