1

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?

Michael Munta
  • 207
  • 2
  • 16
  • Does this answer your question?:[https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp](https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp) – YT_Xaos Jan 20 '21 at 15:48

3 Answers3

2

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>
Brandon Hill
  • 1,782
  • 14
  • 12
  • When I give html and body a height of 100% then I get a scrollbar no matter how short my content is. This is a method I like, but I would somehow need to remove scrollbar in this case. – Michael Munta Jan 20 '21 at 18:19
1

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>
Cristian Sarghe
  • 782
  • 6
  • 15
0

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;
}
Sunil
  • 411
  • 5
  • 12