How to get full height of webpage with CSS?

I am tr开发者_如何学Pythonying to create a pseudo lightbox using very little Javascript. I am in the process of creating the translucent black overlay behind the modal but I am having problems stretching the black overlay all the way down the length of the page. The overlay stops at the end of the initial scrollable area. So, if the user scrolls down the page, the page is not completely covered by the overlay. Here is the code that I am using for the overlay:

.black-overlay {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

It's probably the heigh: 100% that is limiting the page from spanning the whole length of the page.

---

Try position: fixed; instead.