How to set overlay on a page according to page height using CSS


Problem :

In my web site I want to set a overlay above the page when JavaScript is disabled.Since height of every page is different so I am unable to set the overlay based on the page height.Currently what I am doing is that I am setting a fix maximum height of 2000px as follows:

.overLay { background-color:#666666; height:2000px; left:0; position:absolute; top:0; width:100%; z-index:1003; opacity: 0.5; }

But this not what I want.Because some pages have very less height than the mentioned overlay height and some pages have more, so overlay is not to much effective this case.I want to set overlay height according to the page height.Can any one tell me how I can achieve this with out using JavaScript?

Solution :

body,html { height:100%; width:100%; padding:0; margin:0; }
.overlay  { position:absolute; top:0px; left:0px; z-index:999; height:100%; width:100%; background:#c1c1c1; }

This should work. The overlay should be a <div>.

    CSS Howto..

    How to start css and html

    How to load css into html dynamically?

    How can I build a dynamic menu using CSS and JavaScript?

    How to use CSS with Django forms?

    How to remove/add jQueryUI CSS theme from specific element?

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    How to add spacing to text start in css

    How do I center two divs within a larger div?

    How i can force my div to display in block?

    How to change the images using HTML and CSS? [closed]

    How can I change the selection text background using CSS?

    How to make dot-dash underline

    How can I specify distance between list items?

    How does gmail preserve copy and pasted web content, maintaining the attached CSS?

    How to avoid form-control in all inputs with Twitter Bootstrap 3?

    How to set up a correct cascade with label statement

    How to replace cycle('float: left', 'float: right') to use pure css?

    How to create a border gap illusion

    How load a table into multiple webpages using HTML?

    how to create a facebook look alike gallery with css and jquery? [closed]

    How to write print css to get print from web pages in almost same manner as we get from MS word?

    How to use HTMLElement.classList(.toggle)?

    How to change the link color of the current page with CSS

    How to hide some text in the middle of a string with only css [duplicate]

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How to write LESS specific to a controller/page in angular with ES6

    How to add background video stop button

    how to change css of the image link when clicked?

    How to keep website footer at bottom even when page expands downwards

    How can I select my font awesome icons in CSS?