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

Question

我基本上是在尝试添加三个类似向导的 "step" 按钮（对我来说）自然属于页面底部 - "PREVIOUS" | "NEXT" | "FINISH"。三个按钮在一个 div 中。这些按钮需要始终位于屏幕底部并且始终位于 HTML 内容的末尾。

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

我想基本上，我有点想对我的 div 应用有条件的保证金，但我不确定该怎么做。

这里有一个 fiddle 无法显示我正在尝试的内容：

[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 */
}

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

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

尊敬

Answer 2

您可以通过使用 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>

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

Make buttons stick to bottom of page BUT respect scrolling

css

css-position

wizard

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

Make buttons stick to bottom of page *BUT* respect scrolling

css

css-position

wizard

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

Make buttons stick to bottom of page BUT respect scrolling