Position sticky always on bottom of viewport [duplicate] - html

Question

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
(37 answers)
Footer at bottom of page or content, whichever is lower
(5 answers)
Closed 2 years ago.
I am looking for the simplest solution to have a div positioned sticky and always rendered at the bottom of the viewport. I don't want to use position: fixed because the element will be out of the document flow and when I have more content on the page it will hide part of it without triggering overflow.
Sticky on the other hand is problematic when I have too little content on the page then it renders immediately after that content and not all the way on the bottom of the viewport.
Is there a simple way to make sticky always be on the bottom of the viewport by using only HTML/CSS?

Answer 1

Use bottom: 0, e.g.:
html, body {
height: 100%;
}
/* need something scrollable: */
.dummy {
background: #eee;
height: 200%;
border: #f00 1px solid;
}
.stick-bottom {
position: sticky;
bottom: 0;
}
...
<div class="dummy">Lorem ipsum</div>
<div class="stick-bottom">bottom</div>

Answer 2

I see two solutions here.
Using display: flex;
You can make a column layout that covers whole screen (100vh) made of two containers.
Top container would manage the page content
Bottom container would be the footer that would always be "sticky", although not literally CSS sticky.
Example:
.container {
height: 100vh;
background: blue;
display: flex;
flex-direction: column;
}
.content {
height: 100%;
overflow: auto;
}
footer {
height: 60px;
background: red;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="content">
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
</div>
<footer>This is the footer</footer>
</div>
Using position: sticky;
Given two containers (main and footer), you need to apply a min-width: calc(100vh - footerHeight) on the main container, while footer is sticked to the bottom of their container.
This means that the main container will always cover at least 100vh - footerHeight.
Example:
body {
padding: 0;
margin: 0;
}
footer {
background: red;
position: sticky;
bottom: 0;
height: 60px;
}
.content {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
position: relative;
}
<div class="content">
<p>Ping</p>
<p>Ping</p>
<p>Ping</p>
<p>Ping</p>
<p>Ping</p>
</div>
<footer>This is the footer</footer>

Answer 3

I'm not sure how complex UI you have, but for a simple layout without using the CSS position you can use element height to have a div positioned sticky and always rendered at the bottom of the viewport:
HTML
<div class="full">
<h2>body</h2>
</div>
<div class="sticky">
<h4>Sticky</h4>
</div>
CSS
html, body {
height: 100%;
}
.full {
min-height:calc(100% - 70px);
background:#ccc;
}
.sticky {
height:70px;
text-align: center;
background:#000;
color:#fff;
}