title: Responsive DIV to fill entire screen
body: <p>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.</p>
  
  <p>I cannot get this code to do that however. Where and I going wrong?</p>
  
  <p>My DIV Element:</p>
  
  <pre><code>&lt;!---Main Responsive DIV ---&gt;
      &lt;div class="fullscreen" id="fullscreen"&gt;
  
      &lt;!--- This is where we draw. ---&gt;
      &lt;div align="center" style="vertical-align:middle"&gt;
      &lt;canvas
      id="canvas"
      width="400"
      height="250"
      style="border:3px dashed #000000;"&gt;
      &lt;/canvas&gt;
      &lt;/div&gt;
  
        &lt;!---
      This is the form that will post the drawing information
      back to the server.
      ---&gt;
        &lt;cfoutput&gt;
          &lt;form action="signature_action.cfm?ticketID=#url.ticketID#&amp;TT=#url.TT#&amp;techID=#url.techID#&amp;device=ipad" method="post"&gt;
  
            &lt;!--- The canvas dimensions. ---&gt;
            &lt;input type="hidden" name="width" value="1000" /&gt;
            &lt;input type="hidden" name="height" value="615" /&gt;
  
            &lt;!--- The drawing commands. ---&gt;
            &lt;input type="hidden" name="commands" value="" /&gt;
            &lt;!--- This is the export feature. ---&gt;
  
            &lt;!--- Navigation Elements ---&gt;
            &lt;div id="footer"&gt;
            &lt;A HREF="javascript:history.back()"&gt;Go back&lt;/A&gt;&lt;a href=""&gt;Capture Signature&lt;/a&gt;
            &lt;/div&gt;
  
          &lt;/form&gt;
        &lt;/cfoutput&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#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;
      }
  
      &lt;/style&gt;
  </code></pre>