Responsive DIV to fill entire screen

Question

I am trying to format an HTML DIV element so that it is responsive on mobile devices. My goal is to have the dive always fill the 100% of the width and height of any mobile device whether it is a ipad, iphone or androd device. I.E. different size screens.

I cannot get this code to do that however. Where and I going wrong?

My DIV Element:

<!---Main Responsive DIV --->
    <div class="fullscreen" id="fullscreen">

    <!--- This is where we draw. --->
    <div align="center" style="vertical-align:middle">
    <canvas
    id="canvas"
    width="400"
    height="250"
    style="border:3px dashed #000000;">
    </canvas>
    </div>

      <!---
    This is the form that will post the drawing information
    back to the server.
    --->
      <cfoutput>
        <form action="signature_action.cfm?ticketID=#url.ticketID#&TT=#url.TT#&techID=#url.techID#&device=ipad" method="post">

          <!--- The canvas dimensions. --->
          <input type="hidden" name="width" value="1000" />
          <input type="hidden" name="height" value="615" />

          <!--- The drawing commands. --->
          <input type="hidden" name="commands" value="" />
          <!--- This is the export feature. --->

          <!--- Navigation Elements --->
          <div id="footer">
          <A HREF="javascript:history.back()">Go back</A><a href="">Capture Signature</a>
          </div>

        </form>
      </cfoutput>
      </div>

My CSS:

#fullscreen {
        height: 100vh;
        width: 100vw;
        position:fixed;
        top:0;
        left:0;
        background: pink;
        @

    }
    @media screen and (orientation:portrait) { height: 100vh;
        width: 100vw; }

    @media screen and (orientation:landscape) {height: 100vh;
        width: 100vw; }

    #footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:110px;   /* Height of the footer */
       background:#6cf;
    }

    table
    {
       border-collapse:collapse;

    }
    table.borderAll
    {
       border-bottom: 2px solid #000;
    }
    tr.bottomMedium
    {
       border-bottom: 2px solid #000;
    }
    tr.bottomThin
    {
       border-bottom: 2px solid #000;
    }
    tr.bottomDouble
    {
       border-bottom: 2px double #000;
    }
    tr.last
    {
       border-bottom: none;
    }

    </style>

Answer 1

You can use sizing with CSS3's vw and vh units

   #fullscreen {
        height: 100vh;
        width: 100vw;
        position:fixed;
        top:0;
        left:0;
    }

def:

100vw = 100% of viewport width
100vh = 100% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

Update:

 @media screen and (orientation:portrait) { height: 100vh;
            width: 100vw; }
 @media screen and (orientation:landscape) {height: 100vh;
            width: 100vw; }

Answer 2

body
{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: red;
}

<div>
</div>

This assumes that you want the div to scroll when overflowed. Should work on any device, unlike vh and vw that have partial support for a few browsers