Fullscreen <div> with more content below

Alec Jacobson

August 15, 2009

weblog/

Looking back at my "make any java applet you find on the web fullscreen" post, that the more interesting code is not the php I used to build the <applet> tag with width=100% and height=100%, but the css that I use to get the applet fullscreen and still have the form and instructions appear below the applet. Here's the css for a fullscreen <div> and a second <div> below (where you have to scroll down to see its contents):

html, body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  width: 100%; 
} 
#fullscreen {
  height: 100%;
  width: 100%;
}

Then in your page you can just have something like:

<div id="fullscreen" style="background-color:#4F5">
Fullscreen!
</div>
<div style="background-color:#45F">
Under the fullscreen!
</div>

Example: A fullscreen image with text below.