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

Question

I'm basically trying to add three wizard-like "step" buttons that (to me) naturally belong at the bottom of the page - "PREVIOUS" | "NEXT" | "FINISH". The three buttons are in a single div. The buttons need to always be at the bottom of the screen AND always at the end of the HTML content.
I've seen partial solutions to this that try to use position:fixed and that works fine if I have less a page worth of text to scroll through in the wizard - the buttons appear at the bottom of the screen using bottom:0px. But the problem is that sometimes I have a lot of text in the window and I need to scroll down quite some distance. I don't want to see the three wizard buttons until I get to the bottom.
I think basically, I sort of want to apply a conditional margin to my div, but I'm not sure how to do that.
Here's a fiddle that doesn't work to show what I'm trying:
[https://codepen.io/RiverTaig/pen/xzaVxX][1]

Answer 1

You can achieve this by setting height of #smallPage in vh using calc.
Remove the css of .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>

Answer 2

Give your wizard container a fixed height. For our example, let that height is 100px. Now give it a fixed position like this:
.wizard-container {
height: 100px;
position: fixed;
bottom: 0;
left: 0; /* this property and value may depend on you design */
}
Now give your document container a margin-bottom of 100px (equivalent to the height of the .wizard-container)
As per my understanding this is the solution of your problem. Let me know if that doesn't help.
Respects