CSS won't fill view port

I have a div overlay which pops up when a link is clicked, my problem is you have to scroll to click the link, then the overlay remains at the top of the page instead of the area the user is currently looking at.

You can see it here by scrolling down and clicking on any of the links e.g. 'multiple orders 'here' and the terms and conditions at the bottom.

Here is the CSS:

  .black_overlay{
        display: none;
        position: absolute;
        /*top: 0%;
        left: 0%;
        width: 100%;
        height: 1000px; */
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        height: 100%;


        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
   }
 .white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 5px solid blue;
        background-color: white;
        z-index:1002;
        overflow: auto;
  }

And the JavaScript:

<a href = "javascript:void(0)" onclick =    "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'">here</a>

Answers


Use position: fixed on your overlay elements (.black_overlay and .white_content) instead of position: absolute;


Need Your Help

CSS: Multiple problems; opacity also on text, and divs not at right place

html css design css-float

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Title&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; &lt;style

Where do I get the Intel Hardware Accelerated Execution Manager (HAXM) driver for OS X 10.8.1 (Mountain Lion)?

android intel avd osx-mountain-lion hardware-acceleration

I am trying to install the latest driver - version 1.0.1 (R2) from Intel's website. It states that the driver is supported on Intel-based Macs with Mac OS X 10.6 and later (32/64-bit). But when I t...