Resizing a div to fill the browser

Question

Hi,

I have a page with many divs and style, with my div buried somewhere inside.

I am trying to have a button that automatically makes my div, that includes a video player, resize and capture the whole browser.

In order to do that I am trying to get the current position of the div and then position it relatively so that it'll get to the top-left corner so I could then use document.body.clientHeight/clientWidth.

Can't get this to work.

I tried the approach of moving my div to the first div and then resizing however this messes up the flash player.

Any ideas? any different approaches?

Thanks,
Guy

Answer 1

Why relative? You should rather use fixed instead of relative. Then set positon to 0,0 and width and height to 100%. Simple js can do this.

Answer 2

Use one of the lightbox clones that can handle DIVs. They usually copy the DIV in question into their own view DIV, which helps with positioning issues and you don't have to do anything to the buried div.

I find Multi-Faceted lightbox to be very easy for customizations:

http://www.gregphoto.net/lightbox/

but there are lots of others around as well.

Answer 3

On click, just set the div's style to 'fixed', and position 0,0. Like:

var theDiv = document.getElementById('yourDivsId');
theDiv.style.position = 'fixed';
theDiv.style.top      = 0;
theDiv.style.left     = 0;

Answer 4

This should do the trick:

<div style="position:absolute;top:0;left:0;width:100%;height:100%">
   some content here
</div>