定义“高度"时“位置:粘性"不起作用
[英] 'position: sticky' not working when 'height' is defined
本文介绍了定义“高度"时“位置:粘性"不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个登陆页面，用户首先会在其中看到一个主要区域，其下方有一个页脚.进一步向下滚动会发现页脚是一个粘性页眉，我打算使用纯 CSS 来实现这一点.为了获得主要内容和页脚的全屏外观，我将 height 属性设置为两个不同的值:92% 和 8%(使用 vh 也不起作用).无论我在 CSS 中指定的 height(不同单位和所有单位)如何，我的页脚 div 都不会粘住.一旦我删除了 height 属性，它就会按预期工作.
这是我的页面在删除 height 属性之前 的屏幕截图:
如您所见，它不坚持:
删除height 属性值后，它确实坚持:
在相关代码下方:
html,身体 {高度:100%；边距:0；}#主要的 {高度:92%；}#登陆{显示:弹性；对齐项目:居中；对齐内容:居中；高度:100%；文本对齐:居中；}#登陆内容{宽度:20vw；}#footerNav {高度:8%；显示:弹性；对齐项目:居中；位置:-webkit-sticky；位置:粘性；顶部:0px；}
<div id="登陆"><div id="登陆内容"><h1 class="标志">标志</h1><p id="landingParagraph">Lorem ipsum、段落内容等</p><按钮>按钮</按钮>
<div id="footerNav"><div id="footerNavContent"><h1 class="标志">标志</h1>
<p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p>
我已经读到使用 overflow 属性可能会出现问题，尽管它不存在，我也没有听说过关于 height 对其他人来说是个问题的任何消息.当然，我可能是错的.
我已经测试过:
- Firefox 61(每晚)
- Safari 53(技术预览版)
- Chrome 65
大发展；从 #main 中删除 height 属性会保持 #footerNav 粘性.
解决方案
这里的问题是 height，而不是你想到的 height.我们先从粘性位置的定义开始:><块引用>
粘性定位元素是其计算位置的元素价值是粘性的.它被视为相对定位，直到它包含块越过指定的阈值(例如将顶部设置为它的流根(或它的容器)内的值而不是 auto)scroll inside)，此时它被视为卡住"直到遇到其包含块的对边.
这里的重要部分是最后一句话，它解释了当元素到达其包含块的边缘时，sticky 位置将结束，在您的情况下，sticky 元素的包含块是主体并且您将正文设置为 height:100% 并且您的内容溢出.
因此，当将 main 的高度设置为 92% 并将页脚设置为 8% 时，您已经在其包含块的相反边缘制作了页脚.这是我在正文中添加了背景颜色的插图，以便您可以清楚地看到这一点:
html,身体 {高度:100%；边距:0；}html {背景:白色；}身体 {背景:蓝色；}#主要的 {高度:92%；}#登陆{显示:弹性；对齐项目:居中；对齐内容:居中；高度:100%；文本对齐:居中；}#登陆内容{宽度:20vw；}#footerNav {高度:8%；显示:弹性；对齐项目:居中；位置:粘性；顶部:0px；背景:红色；颜色:#fff;}
<div id="登陆"><div id="登陆内容"><h1 class="标志">标志</h1><p id="landingParagraph">Lorem ipsum、段落内容等</p><按钮>按钮</按钮>
<div id="footerNav"><div id="footerNavContent"><h1 class="标志">标志</h1>
<p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p>
如您所见，徽标已经在主体底部，因此无法使其移动为粘性.你的内容也很泛滥.
现在，如果您稍微降低主要内容的高度，您会看到一个小的粘性行为，当页脚到达蓝色部分(body)的底部时，该行为将结束.
html,身体 {高度:100%；边距:0；}html {背景:白色；}身体 {背景:蓝色；}#主要的 {高度:82%；}#登陆{显示:弹性；对齐项目:居中；对齐内容:居中；高度:100%；文本对齐:居中；}#登陆内容{宽度:20vw；}#footerNav {高度:8%；显示:弹性；对齐项目:居中；位置:粘性；顶部:0px；背景:红色；颜色:#fff;}
<div id="登陆"><div id="登陆内容"><h1 class="标志">标志</h1><p id="landingParagraph">Lorem ipsum、段落内容等</p><按钮>按钮</按钮>
<div id="footerNav"><div id="footerNavContent"><h1 class="标志">标志</h1>
<p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p>
为了解决这个问题，您只需要避免将 height:100% 设置为 body.您可以使用 min-height 代替或保持其高度自动.您还可以考虑将 vh 单元用于主要和页脚:
html,身体 {/*高度:100%；不需要*/边距:0；}html {背景:白色；}身体 {背景:蓝色；}#主要的 {高度:92vh；}#登陆{显示:弹性；对齐项目:居中；对齐内容:居中；高度:100%；文本对齐:居中；}#登陆内容{宽度:20vw；}#footerNav {高度:8vh；显示:弹性；对齐项目:居中；位置:粘性；顶部:0px；背景:红色；颜色:#fff;}
<div id="登陆"><div id="登陆内容"><h1 class="标志">标志</h1><p id="landingParagraph">Lorem ipsum、段落内容等</p><按钮>按钮</按钮>
<div id="footerNav"><div id="footerNavContent"><h1 class="标志">标志</h1>
<p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p><p>你好</p>
<小时>有关更多详细信息/示例的相关问题:
为什么带有 position:sticky 的元素不粘在父元素的底部?
什么是滚动框"?
如果您为 position:sticky 指定 `bottom: 0`，为什么它做的事情与规范不同?
I am building a landing page where the user first sees a main area with a footer underneath it. Scrolling further down reveals that the footer is a sticky header, and I aim to use pure CSS to achieve this. To obtain the fullscreen appearance of the main content and the footer I set the height property to two different values: 92% and 8% (using vh also doesn't work). No matter the height I specify in my CSS (different units and all), my footer div is not sticking. As soon as I remove the height property it works as intended.
Here is a screenshot of my page before removing the height properties:
As you can see, it does not stick:
After removing the height property values, it does stick:
Below the relevant code:
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>
I have read that using the overflow property can be problematic, though it is is not present nor have I heard anything about height being an issue for others. I might be wrong, of course.
I have tested on:
- Firefox 61 (Nightly)
- Safari 53 (Tech Preview)
- Chrome 65
EDIT: Big development; removing the height property from #main keeps #footerNav sticky.
解决方案
The issue here is with height, but not the height you thought about. Let's first start by the definition of the sticky position:
A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.
The important part here is the last sentence which explain that the position sticky will end when the element reach the edge of its containing block and in your case the containing block of the sticky element is the body and you set the body to be height:100% and you are having an overflow of content.
So when setting the height of main to be 92% and the footer to be 8%, you already made the footer at the oppsite edge of its containing block. Here is an illustration where I added a background color to the body so you can clearly see this:
html,
body {
height: 100%;
margin: 0;
}
html {
background:white;
}
body {
background:blue;
}
#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: sticky;
top: 0px;
background:red;
color:#fff;
}
<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>
As you can see the logo is already at the bottom of the body so there is no way to make it move as sticky. Also your content is overflowing.
Now if you decrease the height of the main content a bit, you can see a small sticky behavior that will end when the footer will reach the bottom of the blue part (the body).
html,
body {
height: 100%;
margin: 0;
}
html {
background:white;
}
body {
background:blue;
}
#main {
height: 82%;
}
#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: sticky;
top: 0px;
background:red;
color:#fff;
}
<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>
In order to fix the issue you simply need to avoid setting height:100% to the body. You can use min-height instead or keep its height auto. You may also consider vh unit for main and footer:
html,
body {
/*height: 100%;
no needed
*/
margin: 0;
}
html {
background:white;
}
body {
background:blue;
}
#main {
height: 92vh;
}
#landing {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
#landingContent {
width: 20vw;
}
#footerNav {
height: 8vh;
display: flex;
align-items: center;
position: sticky;
top: 0px;
background:red;
color:#fff;
}
<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>
Related questions for more details/examples:
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?
这篇关于定义“高度"时“位置:粘性"不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
