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

Question

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

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

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

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

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

Answer 1

您可以通过使用calc 在vh 中设置#smallPage 的height 来实现此目的。 删除.wizard的css

var i = 0;
function toggle() {
  var smallEl = document.getElementById("smallPage");
  var bigEl = document.getElementById("bigPage");
  if (i === 0) {
    smallEl.style.display = "none";
    bigEl.style.display = "";
    i = 1;
  } else {
    smallEl.style.display = "0";
    bigEl.style.display = "none";
    i = 0;
  }
}

.relative{
  width:200px;
  
}
.wizard{
  
}

.content {
    min-height: calc(100vh - 60px); /* Change as per your requirement */
}

<div class="relative">
  <button onclick="toggle()">TOGGLE</button>
  <div id="smallPage" class="content">
    This has just a tiny amount of text and won't cause the page to scroll.  Click the toggle button at the top to hide this div and load one with a lot more text. Hopefully the three buttons -  "PREVIOUS", "NEXT", and "FINISH" - will still stay at the bottom! 
  </div>
  <div id="bigPage" style="display:none">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
  </div>  
  <div class="wizard">
    <button>Prev</button>
    <button>Next</button>
    <button>Finish</button>
  </div>

</div>

Answer 2

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

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

现在给你的文档容器一个 100px 的margin-bottom（相当于.wizard-container 的高度）

据我了解，这是您问题的解决方案。如果这没有帮助，请告诉我。

尊重