Positioning a div just before the footer of my page - html

Question

Attaching a page layout to explain my requirements better.
Place the the text just before the footer section.
Some time the footer may not be visible (may need scroll), in that case bring the text to the bottom of visible area.
I have tried many ways to achieve this.
Any pointers to solve this issue would be helpful.
Thanks,
Santhosh

Answer 1

You can use flexbox to achieve this
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
/* occupy all height */
flex: 1 0 auto;
/* nested flex container */
display: flex;
flex-direction: column;
}
.bottom-text {
/* Move to the bottom */
/* This works because this is flex item */
margin-top: auto;
}
/* styles just for demo */
body {
text-align: center;
}
header {
background-color: tomato;
}
.content {
background-color: lightsteelblue;
}
.bottom-text {
background-color: moccasin;
}
footer {
background-color: lime;
}
<header>Page header</header>
<section class="content">
Page content
<div class="bottom-text">Place a text just before footer</div>
</section>
<footer>Page footer</footer>
For showing bottom-text when footer is not visible we'll use Javascript:
// Checks if element is visible on screen
function checkVisible(element) {
var rect = element.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
var footer = document.querySelector("footer");
var bottomText = document.querySelector(".bottom-text");
var bottomTextFixedClassName = "bottom-text--fixed";
// Sets element position as fixed
// when footer is not visible on screen
function setFixedButtonText() {
if (checkVisible(footer))
bottomText.classList.remove(bottomTextFixedClassName);
else
bottomText.classList.add(bottomTextFixedClassName);
}
window.addEventListener("scroll", setFixedButtonText);
setFixedButtonText();
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
/* occupy all height by flex-grow: 1 */
/* Don't shrink using flex-shrink: 0 */
/* Setting flex-basis to 1500px to emulate long content */
/* Replace 1500px with auto in production code */
flex: 1 0 1500px;
/* nested flex container */
display: flex;
flex-direction: column;
}
.bottom-text {
/* Move to the bottom */
/* This works because this is flex item */
margin-top: auto;
}
.bottom-text--fixed {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
/* styles just for demo */
body {
text-align: center;
}
header {
background-color: tomato;
}
.content {
background-color: lightsteelblue;
}
.bottom-text {
background-color: moccasin;
}
footer {
background-color: lime;
}
<header>Page header</header>
<section class="content">
Page content
<div class="bottom-text">Place a text just before footer</div>
</section>
<footer>Page footer</footer>
If you need IE suppost you can use change min-height: 100vh; to height: 100vh;. This is workaround for IE's min-height bug for flex with flex-direction: column;.