javascriptjqueryhtmlcssflot

How do I make a div full screen?


I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my div is as follows:

<div id="placeholder" style="width:800px;height:600px"></div>

Of course, the style attribute is only for testing. I will move this to CSS after during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?


Solution

  • When you say "full-screen", do you mean like full-screen for the computer, or for taking up the entire space in the browser?

    You can't force the user into full-screen F11; however, you can make your div full screen by using the following CSS

    div {width: 100%; height: 100%;}
    

    This will of course assume your div is child of the <body> tag. Otherwise, you'd need to add the following in addition to the above code.

    div {position: absolute; top: 0; left: 0;}