How to sticky bottom when there's not enough content to overflow?

Question

When there\'s enough content to overflow, everything works perfectly. Take a look here.

However, when there isn\'t, I still want the red e

Answer 1

Make your body-content a flex element, you will be able to send sticky-guy to the bottom of it when the content is not overflowing.

Add those rules to body-content:

  display: flex; /* instead of display: block; */
  flex-direction: column;

And this rule to sticky-guy:

  margin-top: auto;

In the snippet, I used a height of 100vh for the scroller, so that you can easily see that it works with the content overflowing or not.

(it's actually almost the same answer as @Temani Afif did. You just needed to keep the sticky rules for sticky-guy)

scroller {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100vh;
  overflow: auto;
}

head-content {
  display: block;
  background: green;
}

body-content {
  /*********** Added rules */
  display: flex;
  flex-direction: column;
  /*********** */
  flex: 1;
  background: yellow;
}

sticky-guy {
  display: block;
  position: sticky;
  bottom: 0;
  background: red;
  /*********** Added rule */
  margin-top: auto;
  /***********  */
}

  
    head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content
  
  
    body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content
    
      sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky
    
  

EDIT

It works with Firefox and Chrome, but not on Safari. It seems like Safari interprets flex differently. Using flex: 1 on body-content will limit its height to the scroller container's height. That's why it "loses" its background color. In fact, [body content body ...] is overflowing body-content. I don't see a 100% clean solution yet.

What you could do of course is put scroller's backround-color in yellow as well.

scroller {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100vh;
  overflow: auto;
  /*********** Added rules */
  background: yellow;
  /*********** */
}

head-content {
  display: block;
  background: green;
}

body-content {
  /*********** Added rules */
  display: flex;
  flex-direction: column;
  /*********** */
  flex: 1;
  background: yellow;
}

sticky-guy {
  display: block;
  position: sticky;
  bottom: 0;
  background: red;
  /*********** Added rule */
  margin-top: auto;
  /***********  */
}

  
    head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content
  
  
    body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body
    content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body
    content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content
    
      sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky
    
  

And finally with a clean fix for Safari.

Add this rule to body-content:

min-height: fit-content;

scroller {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100vh;
  overflow: auto;
}

head-content {
  display: block;
  background: green;
}

body-content {
  /*********** Added rules */
  display: flex;
  flex-direction: column;
  min-height: fit-content; /* For Safari */
  /*********** */
  flex: 1;
  background: yellow;
}

sticky-guy {
  display: block;
  position: sticky;
  bottom: 0;
  background: red;
  /*********** Added rule */
  margin-top: auto;
  /***********  */
}

  
    head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content head content
  
  
    body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body
    content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body
    content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content body content
    
      sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky