【发布时间】：2018-09-25 15:43:27
【问题描述】：
我正在构建一个登录页面，用户首先会看到一个主要区域，其下方有一个页脚。进一步向下滚动显示页脚是一个粘性页眉，我的目标是使用纯 CSS 来实现这一点。为了获得主要内容和页脚的全屏外观，我将height 属性设置为两个不同的值：92% 和8%（使用vh 也不起作用）。无论我在 CSS 中指定的height（不同的单位和所有单位），我的页脚div 都不会粘住。一旦我删除 height 属性，它就会按预期工作。
这是我的页面在删除height属性之前的屏幕截图：
如您所见，它确实不坚持：
删除height 属性值后，它确实粘住了：
相关代码下方：
html,
body {
height: 100%;
margin: 0;
}
#main {
height: 92%;
}
#landing {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
#landingContent {
width: 20vw;
}
#footerNav {
height: 8%;
display: flex;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0px;
}<div id="main">
<div id="landing">
<div id="landingContent">
<h1 class="logo">Logo</h1>
<p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
<button>Button</button>
</div>
</div>
</div>
<div id="footerNav">
<div id="footerNavContent">
<h1 class="logo">Logo</h1>
</div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>我已经读到使用overflow 属性可能会出现问题，尽管它不存在，我也没有听说过height 对其他人来说是个问题。当然，我可能错了。
我已经测试过：
- Firefox 61（每晚）
- Safari 53（技术预览）
- 铬 65
编辑：大发展；从#main 中删除height 属性会使#footerNav 保持粘性。
【问题讨论】：
-
在您的第一个（设置高度的加载页面）屏幕截图和第三个（没有高度的工作）屏幕截图中，
footer的高度没有太大差异。那么，您想设置footer的height的具体目的是什么？另外，您是否尝试过仅为footer删除height？ -
@xuhaib 我很欣赏为统一设置的高度，并确保页面 100% 填充页脚和主要内容，如果这有意义的话。删除页脚的高度产生了一个有趣的结果：页脚会保持粘性一段时间，但是一旦我滚动到某个点，就会“不粘”。在 Firefox 中测试。
-
有什么理由不能使用 javascript？
-
@Pixelomo 没有什么特别的原因，我想我宁愿保持干净。
-
完全不同意，CSS3 的“粘性位置属性”是为他试图解决的问题而设计的。 Temani 一针见血。
标签： html css flexbox css-position sticky