使按钮停留在页面底部*但*滚动

Question

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

我已经看到了一些尝试使用 position：fixed 的解决方案，并且如果我在向导中没有足够的一页文字可以滚动浏览，则该方法很好用-按钮显示在屏幕底部使用bottom：0px。但是问题是，有时窗口中有很多文本，并且需要向下滚动一定距离。在进入底部之前，我不希望看到三个向导按钮。

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

这是一个小提琴，无法显示我在尝试什么：

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

Answer 1

为向导容器提供固定高度。对于我们的示例，让该高度为100px。现在给它这样的固定位置：

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

现在为您的文档容器提供100px的margin-bottom（等于.wizard-container的高度）

据我了解，这是您的问题的解决方案。让我知道这是否无济于事。

尊重

Answer 2

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

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>