Position absolute, with a bottom of 0 only works for a parent with a height of 100%

Position absolute, with a bottom of 0 only works for a parent with a height of 100%. Once the height of the parent goes over 100%, setting it to bottom: 0 will no longer work. You won’t be able to see that, in the code snippet itself - as it only allow the body height to be set up to 100%. How would I fix this?

body { height: 200%; }
#bottom {
  border: 1px solid black;
  position: absolute;
  width: 100%;
  bottom: 0;
}
<div id='bottom'>
  bottom
</div>

solution

It’s probably not working because you are absolutely positioning it to the bottom of the viewport. If you want to absolutely position it to the bottom relative to the parent element, in this case, the body element, add position: relative to the element:

html, body {
  height: 200%;
}
body {
  position: relative;
}
#bottom {
  border: 1px solid black;
  position: absolute;
  width: 100%;
  bottom: 0;
}
<div id="bottom">bottom</div>