粘性位置不适用于视口高度小于 500 像素

【问题标题】：sticky position not working for viewport height less than 500px粘性位置不适用于视口高度小于 500 像素
【发布时间】：2021-07-29 15:25:43
【问题描述】：

我对 CSS 中的粘性位置有一个奇怪的问题。我希望一个元素贴在页面底部，如果视口高度大于或等于 500px，它可以正常工作，但如果进一步减小，则元素不再贴在页面底部

这就是粘性元素的样子

 .sticky{
    position: sticky;
    bottom: 0;
    top: 90%;
    display: flex;
    height: 50px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: var(--tl-dark-theme);
}

这是粘性元素的容器

section {
    height: 100%;
}

【问题讨论】：

标签： html css web sticky

【解决方案1】：

当您低于 500 像素高度时，就会出现样式冲突。在这种样式中：

 .sticky{
    position: sticky;
    bottom: 0;
    top: 90%;
    display: flex;
    height: 50px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: var(--tl-dark-theme);
}

如果您的高度小于 500 像素，则粘性元素的顶部距离容器底部的距离小于 50 像素，但其高度固定为 50 像素。

当整体高度小于 500px 时，您希望元素的高度是多少？例如，您可以使用 max-height: 50px 而不是设置高度。

【讨论】：