Why isn't my 'position: sticky' footer working when I define a 'height' property?

'position: sticky' not working when 'height' is defined

When using CSS to create a sticky header, it is common to set the height property of the footer div. However, this can sometimes cause the sticky behavior to fail.

The reason for this is that sticky positioning relies on the containing block to determine the sticking point. When the height property is defined on the footer div, it becomes the containing block. As a result, the footer div is already at the edge of its containing block, and there is no longer a threshold for it to cross to trigger the sticky behavior.

To fix this issue, remove the height property from the footer div. This will allow the body to become the containing block, and the footer div will be able to stick to the bottom of the page as intended.

Here is an example of how the CSS could be modified to fix the sticky behavior:

html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92vh;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

With this change, the footer div will now stick to the bottom of the page as intended.

The above is the detailed content of Why isn't my 'position: sticky' footer working when I define a 'height' property?. For more information, please follow other related articles on the PHP Chinese website!