我试图创建一个3行布局（页眉，内容，页脚），使用:
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%; //keep this to prevent content overflowing outside container
grid-gap: 2em;
grid-template-areas:
"header"
"content"
"footert";
我使用align-self:end使页脚始终位于页面底部。
问题是，我想让页脚具有粘性，这样当用户沿着内容向上或向下滚动时，页脚始终保持在底部可见。
如果我使用position:absolute或fixed，这似乎会将页脚从网格中分离出来。 内容继续在上面滚动，就像它不在那里一样，有时它还会减少页脚项的宽度。
有什么办法吗？
您可以使用position:sticky和::before伪元素来始终保持内容和页脚之间的间隙。
通过在负y方向上平移伪元素，将其推到页脚上方，然后为其提供与正文相同的背景颜色。 这会让它看起来像是在页脚和内容之间有一个空隙。
null
body {
margin: 0;
background: #fff;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: 30px 400px 30px;
grid-gap: 1em;
}
.header {
background: #22f;
}
.content {
background: #fc9;
}
.footer {
background: #ee1;
position: sticky;
bottom: 0;
}
.footer::before {
content: '';
position: absolute;
background: #fff;
width: 100%;
height: 1em;
transform: translateY(-100%);
}<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
这是吗？ 只需添加位置:粘滞和底部:0即可。 也不需要网格区域。
null
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1500px auto;
grid-template-columns: 100%;
grid-gap: 2em;
}
.header {
background: pink;
height: 50px;
}
.content {
background: aqua;
}
.footer {
background: sandybrown;
height: 50px;
position: sticky;
bottom: 0;
}<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
您可以尝试如下所示:
null
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-gap: 2em;
}
.header {
background: pink;
height: 50px;
}
.content {
background: aqua;
font-size:40px;
}
.footer {
box-shadow:0 -2em 0 0 #fff;
background: sandybrown;
height: 50px;
position: sticky;
bottom: 0;
}
body {
margin:0;
}<div class="container">
<div class="header"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend enim sapien. Proin facilisis ornare mi, ut eleifend odio dictum vestibulum. Pellentesque arcu ex, vehicula eget porta at, maximus ac massa. In hac habitasse platea dictumst. Sed ultrices et massa a ultrices. Pellentesque scelerisque, neque vitae semper bibendum, risus dolor suscipit felis, id porttitor nisi justo et lectus. Mauris interdum ligula imperdiet nunc ornare, </div>
<div class="footer"></div>
</div>