[RESOLVED] Set height of <div> to full height of the page

admin

Administrator
Staff member
Is there any way to set the HEIGHT of a <DIV> object to be the same as the full height of the page (NOT screen) such that it covers the page even if the page is scrolled down?

(If this is not possible, is there a way to make the layer always be in the top left corner of the screen (NOT page) such that if HEIGHT is 100% then scrolling up/down will still mean the <DIV> spans the full height of the screen?)

thanks a lot in advance...yeah, all you have to do is use a #container div. and make sure that the stuff that you want the #container div to stretch to aren't floated.What type of layout effect are you trying to create?I'm not sure how the #container approach works.

What I am trying to do is to create a <div> that stretches the full height and widhth of the page (not screen) and which overlays the actual content of my page. That way I can manage some onmousedown / onkeydown events as they would relate to the whole page.

I know I can manage page events through document.onmousedown and document.onkeydown events, but these include also the scroll-bar, so if I was to reject either event, the user could not even scroll the page. What I want to achieve instead is for the user to be able to view / scroll the page, but not click on any of the objects of the page. Right now, my best shot at achieving this is to try an overlay it with a <div> and then trap the onmousedown and onkeydown events of the <div>.And if I were to disable JavaScript - or view the source - or take a screen shot - I would have access to anythingAll u do is create on abolute div with width abd set to 100% and put all your divs in there.

This means that all your content will fit the screen size no matter how big or small your screen resolution is.

CheersThe purpose of this overlay is not security (thanks for the heads-up though, bathurst_guy) , but to manage a print preview page (which should be for viewing only, but not for interaction).

I've seen pages where this was somehow achieved (ie, you could scroll but not click / type), but just can't seem to recall where and I'm not able to replicate it yet.

If there is no possibility of a fully stretched <div> (to the size of the page), perhaps some thoughts on dynamic <div>, where the div is always in view (even if u scroll)....but to manage a print preview page (which should be for viewing only, but not for interaction)Don't tell me some browser lets you interact with a print preview image.This is a manually prepared page using content from the main page which is then printed using window.print() command. Because I'm copying some of the content from the main page, I am also replicating objects such as <select> and <input>. What I want is to disable interactivity with these objects (without going through them one by one and setting them to disabled).<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/goingtoprint/">http://www.alistapart.com/articles/goingtoprint/</a><!-- m -->
 
Top