粘滞位置不适用于小于500px的视口高度

Question

我在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%;
}

Answer 1

一旦你的高度低于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);
}

如果你的高度小于500px，那么粘性元素的顶部距容器底部的高度小于50px，但其高度固定为50px。

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