How to prevent fixed bottom bar from hiding content - html

Question

I have a fixed div that is covering up content on the bottom of my page when the user scrolls down. This specifically impacts mobile devices. I've recreated the problem here: http://codepen.io/bkuhl/pen/LWjXdx
Here's the code from that post:
<div class="main-content">
Test Content
<div class="content-suffix">
Copyright
</div>
</div>
<div class="fixed-bottom-bar">
I'm covering up the Copyright text
</div>
and CSS:
.main-content {
width: 100%;
min-height: 400px;
background-color: darkgrey;
}
.content-suffix {
padding-top: 350px;
}
.fixed-bottom-bar {
position: fixed;
bottom: 0;
right: 0;
padding: 1em;
width: 100%;
background-color: blue;
}
One approach I've thought about is adding a [padding|margin]-bottom to the content-suffix, but in this case my content on the fixed element has a variable length.
How can I make sure the "Copyright" text isn't covered by the fixed element, keeping in mind the fixed-bottom-bar has a variable text length?

Answer 1

You could use the css calc() property to achieve this. Add margin-bottom: calc(/* the values you want to calculate */); You haven't set the font-size, but the default is 16px. Therefore, you would want to add padding to the bottom of content-suffix that would be 16px + 2em, the total height of the footer. Your final code would be:
.content-suffix {
padding-top: 350px;
margin-bottom: calc(16px + 2em);
}
This would work better if you specified the font-size of the text somewhere. This could be a dynamic value (e.g. 1vw, 1em, etc.) and this would still work.

Answer 2

You need to set position to absolute, give overflow-y will be more better and calc for your height.
.main-content {
width: 100%;
height : calc(100% - 94px) !important;
background-color: darkgrey;
overflow-y : auto;
position:absolute;
}
.content-suffix {
padding-top: 350px;
}
.fixed-bottom-bar {
position: fixed;
bottom: 0;
height : 50px;
right: 0;
padding: 1em;
width: 100%;
background-color: blue;
}
<div class="main-content">
Test Content
<div class="content-suffix">
Copyright
</div>
</div>
<div class="fixed-bottom-bar">
I'm covering up the Copyright text
</div>

Answer 3

If the footer is simple you can add it at the bottom of the content and make it hidden so it will take space but will not be displayed.
.main-content {
width: 100%;
background-color: darkgrey;
}
.content {
display: flex;
align-items: flex-end;
height: 400px;
}
.bottom-bar {
width: 100%;
background-color: blue;
}
.bottom-bar.space {
visibility: hidden; /* hides the element but keeps it space*/
}
.bottom-bar.fixed {
position: fixed;
bottom: 0;
}
<div class="main-content">
<div class='content'>Test Content</div>
<div class="bottom-bar space">
I'm covering up the<br> Copyright text
</div>
<div class="bottom-bar fixed">
I'm covering up the<br> Copyright text
</div>
</div>

Answer 4

If you have no restriction for using JavaScript, look at below codes:
var x =
document.getElementsByClassName("fixed-bottom-bar");
document.getElementById("forged-fixed-bottom-bar").style.height = "" + x[0].offsetHeight + "px";
.main-content {
width: 100%;
min-height: 400px;
background-color: darkgrey;
}
.content-suffix {
padding-top: 350px;
}
.fixed-bottom-bar {
position: fixed;
bottom: 0;
right: 0;
padding: 1em;
width: 100%;
background-color: blue;
}
#forged-fixed-bottom-bar {
height: 20px
}
<div class="main-content">
Test Content
<div class="content-suffix">
Copyright
</div>
</div>
<div id="forged-fixed-bottom-bar">
</div>
<div class="fixed-bottom-bar">
I'm covering up the Copyright text
</div>