响应式DIV填满整个屏幕

Question

我正在尝试格式化HTML DIV元素,以便它在移动设备上响应.我的目标是让潜水始终填充任何移动设备的100%宽度和高度,无论是ipad,iphone还是androd设备.IE浏览器尺寸不同.

但是,我无法使用此代码执行此操作.哪里和我错了？

我的DIV元素:

<!---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>

我的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

您可以使用CSS3 vw和单位调整大小vh

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

高清:

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

更新:

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