Geek asks and answers

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

I am trying to use a scrollable overlay that removes the rest of the site. I can't seem to get 100% of the height of an absolute element inside 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 the bottom: 0; on an absolute element, it fills the height when the page is not overflowing. When a page overflows, it leaves a space.

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

If you resize the window so that the content matches and then resizes, so the content does not appear, you can see that it does not work in both cases.

+5
1

, min-height bottom: auto .

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

, min-height:100%; height:100%;, , , section , 100%.

:

(position: relative|fixed|absolute;), . article section.

section top:0px; bottom:0px; . , html

html - , height:100%; - , , 100%.

+8

More articles:


All Articles