时间戳

首页 > 解决方案 > 使按钮粘在页面底部*但*尊重滚动

css - 使按钮粘在页面底部*但*尊重滚动

问题描述

我基本上是在尝试添加（对我而言）自然属于页面底部的三个类似向导的“步骤”按钮-“上一个”| “下一个” | “结束”。这三个按钮位于一个 div 中。按钮必须始终位于屏幕底部并且始终位于 HTML 内容的末尾。

我已经看到了尝试使用position:fixed的部分解决方案，如果我在向导中滚动浏览的文本页面较少，则效果很好 - 按钮使用 bottom:0px 出现在屏幕底部。但问题是有时我的窗口中有很多文本，我需要向下滚动一段距离。在我到达底部之前，我不想看到三个向导按钮。

我认为基本上，我有点想对我的 div 应用条件边距，但我不知道该怎么做。

这是一个无法显示我正在尝试的小提琴：

[https://codepen.io/RiverTaig/pen/xzaVxX][1]

标签： csscss-positionwizard

解决方案

给你的向导容器一个固定的高度。对于我们的示例，假设高度为 100 像素。现在给它一个固定的位置，如下所示：

.wizard-container {
    height: 100px;
    position: fixed;
    bottom: 0;
    left: 0; /* this property and value may depend on you design */
}

现在给你的文档容器 a margin-bottom100px （相当于 的高度.wizard-container）

据我了解，这是您问题的解决方案。让我知道这是否没有帮助。

尊重

推荐阅读