页面或内容底部的页脚，以较低者为准
我有以下结构：
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
我<article>使用javascript 动态加载内容。因此，<article>块的高度可以改变。
<footer>当有很多内容时，我希望该块位于页面底部；而当仅有几行内容时，我希望该块位于浏览器窗口的底部。
目前，我可以做一个或另一个…但是不能两者都做。
因此，有谁知道我该怎么做-将<footer>其固定在页面/内容底部或屏幕底部，具体取决于哪个较低。
问题答案：
RyanFait的粘性页脚非常好，但是我发现它的基本结构缺乏*。
Flexbox版本
如果您足够幸运，可以在不需要支持旧版浏览器的情况下使用flexbox，那么粘性页脚将变得轻而易举， 并 支持动态大小的页脚。
使用flexbox使页脚固定在底部的诀窍是使同一容器中的其他元素垂直弯曲。它所需要的只是一个全高包装元素，display:flex其中至少一个具有flex大于的同级元素0：
CSS：
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
如果您不能使用flexbox，我选择的基本结构是：
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
并非离：
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
使页脚粘住的技巧是将页脚锚定到其包含元素的底部填充。这_要求_页脚的高度是静态的，但是我发现页脚通常是静态高度。
HTML：
<div id="main-wrapper">
...
<footer>
</footer>
</div>
CSS：
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
在页脚固定到的情况下#main-wrapper，您现在#main-wrapper至少需要等于页面的高度，除非其子级更长。这是通过做#main-wrapper有一个min-height的100%。您还必须记住它的父母，html并且body必须与页面一样高。
CSS：
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
当然，您应该对我的判断提出质疑，因为即使没有内容，此代码也会迫使页脚从页面底部掉下来。最后一个诀窍是要改变由所使用的盒模型#main- wrapper，使得min-height中100%包括100px填充。
CSS：
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
有了原始HTML结构的页脚。只是要确保footer的height是等于#main-wrapper的padding-bottom，你应该设置。
*我发现Fait的结构存在缺陷是因为它在不同的层次结构上设置了.footerand.header元素，同时添加了不必要的.push元素。
-
问题内容： 我的页面只有几行内容。我希望页脚被推到底部。 我不想用 又名 粘性页脚 没有jQuery，这可能吗？ 有什么建议么？ 问题答案： 还有另一种粘页脚]由瑞安既成事实不使用位置固定的：
-
这是我的HTML： 这是我的CSS，仅用于页脚：
-
问题内容： 有什么方法可以牢记jQuery Mobile框架的操作方式来修复页面，以便页脚始终与页面底部对齐-不管高度如何。 按照目前的情况，jQuery页面的高度将发生变化，尤其是当设备从纵向旋转为横向时，因此解决方案必须考虑到这一点。 只是为了澄清-我不需要页脚位于视口的底部，而只是为了使默认页面高度不低于视口高度而工作。 谢谢。 问题答案： 您可以在CSS文件中添加此代码： 因此，页面数据角
-
我有一个22*17的PDF文件，我需要它来适应11*8.5的页面内容。 基本上减小了现有的页面大小。我正在使用断章。 我该怎么做？
-
问题内容： 任何人都可以解释如何将页脚div与页面底部对齐。从我所看到的示例中，它们都显示了如何使div保持在底部可见，无论您将页面滚动到何处。虽然我不想要那样。我希望它固定在页面的底部，所以它不会移动。感谢帮助！ 问题答案： 更新 我的原始答案来自很久以前，并且链接已断开；更新它，使其继续有用。 我包括内联的更新解决方案，以及JSFiddle上的工作示例。注意：尽管没有内联那些样式，但我依赖CS
-
这是我的代码，我想我的页脚是静态的在我的html页面底部，我如何修复它？