CSS - absolute within fixed with overflow for scrolling and 100% height

Question

I'm trying to have a scrollable overlay of some sort that blanks out the rest of the site. I can't seem to get 100% height on the absolute element within my fixed element.

http://codepen.io/intellix/pen/GBltK

section {
  background: red;
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow-x:auto;

}

article {
  background: blue;
  position: absolute;
  top:0;
  width:300px;
  bottom: 0;
  left: 0;
}

If I set bottom: 0; on the absolute element, it fills height when the page doesn't overflow. When the page overflows it leaves a gap.

When I use bottom: auto on my absolute element it fills height with overflow, but leaves a gap without overflow!

If you resize the window so the content fits and then resize so the content doesn't, you can see that it doesn't work in both cases.

Answer 1

I think you want to use min-height and bottom:auto here.

article {
  background: blue;
  position: absolute;
  top:0;
  width: 300px;
  bottom: auto;
  min-height: 100%;
  left: 0;
}

The reason you need min-height:100%; and can't use height:100%; is because when the section content in scrollable it's height is actually greater than 100%.

Longer explination:

With positioned (position: relative|fixed|absolute;) elements, percentage based heights are determined relative to their offset parents. In the case of the article element, it's offset parent is the section element.

The section element uses top:0px; and bottom:0px; to determine it's height. These values are determined by the height of it's offset parent which is the html element

html is a special case where height:100%; is the size of the view-able window, which is why your scrollable element has a height larger than 100%.