我正在构建一个登陆页面,用户首先看到一个主要区域,下面有一个页脚。进一步向下滚动显示页脚是一个粘性标题,我的目标是使用纯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(技术预览版)
- chrome 65
注意-从#main
中删除height
属性会使#footerNav
保持粘性。
3条答案
按热度按时间j8yoct9x1#
这里的问题是
height
,而不是你想到的height
。我们先从sticky position的定义开始:粘性定位元素是计算出的位置值是粘性的元素。它被视为相对定位,直到它的包含块在它的流根(或它*滚动的容器)内超过指定的阈值(例如将top设置为auto以外的值),此时它被视为“卡住”,直到遇到它的包含块的相对边缘**。
这里最重要的部分是最后一句,它解释了当元素到达其包含块的边缘时,sticky位置将 end,在你的例子中,sticky元素的包含块是body,你设置body为
height:100%
,你有一个溢出内容。因此,当设置main高度为92%,页脚为8%时,您已经在其包含块的对面边缘创建了页脚。下面是一个插图,我在主体上添加了背景色,这样你就可以清楚地看到这一点:
正如你所看到的,标志已经在身体的底部,所以没有办法使它移动作为粘性。你的内容也是泛滥的。
现在,如果您将主内容的高度降低一点,您可以看到一个小的粘性行为,当页脚到达蓝色部分(
body
)的底部时,该行为将结束。为了解决这个问题,您只需要避免将
height:100%
设置到body。您可以使用min-height
代替或保持其高度自动。您也可以考虑vh
单位作为main和footer:更多细节/示例相关问题:
Why element with position:sticky doesn't stick to the bottom of parent?
What are
scrolling boxes
?If you specify
bottom: 0
for position: sticky, why is it doing something different from the specs?vojdkbi02#
我也遇到了同样的问题,但我需要父容器上的
height: 100%;
。在我的例子中,我有一个粘性导航,内容需要增长到其完整的长度,页脚应该总是在页面的末尾可见(但没有位置属性)。我通过将
overflow: auto;
设置为父容器来修复它。现在父对象仍然是100%高的,但是它里面的粘性容器,不受高度限制。cygmwpex3#
支持使用位置:粘粘的似乎有点弱。您可以在此页面查看:
https://caniuse.com/#search=position%3A%20sticky
如果你想要一个粘性页脚,你可以使用position:绝对,这是每个浏览器都支持的。我用你的代码创建了一个迷你版本来说明我关于位置的观点:绝对的。
请注意,我将id=“footerNav”更改为class=“footerNav”。我个人喜欢使用风格的课程。但是如果你仍然喜欢的话,你可以使用id。
如果你希望登录页面出现,然后用户滚动一点来查看你的页脚,那么你可以使用height:100vh,并从页脚中删除位置绝对值,因为它将被主要内容div向下推。例如:
我希望我的回答能在某种程度上帮助你。