响应式DIV占满整个屏幕

Question

我尝试着对一个HTML DIV元素进行格式化，以使其在移动设备上具有响应式设计。我的目标是让这个DIV元素始终填满任何移动设备的100%宽度和高度，无论是iPad、iPhone还是安卓设备，即不同尺寸的屏幕。

然而，我无法让代码实现这一点。请问我做错了什么？

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

- Brian Fleishman

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; }

- Gildas.Tambo

---

如果平板用户从竖屏模式切换到横屏模式，那么它会自动调整大小吗？ - Brian Fleishman

例如，在iPhone上，它在纵向模式下看起来正确，但当我切换到横向模式时，它不会自动调整以填充100％的视口。这只能通过JavaScript完成吗？ - Brian Fleishman

@Brian Fleishman，这应该可以工作，但是如果不行，请尝试添加更新来修复它。您在iPhone上使用的浏览器是什么？它在caniuse中受支持吗？ - Gildas.Tambo

我正在iOS8中使用Safari浏览器。您的CSS更新是否应作为附加的CSS项添加？ - Brian Fleishman

我编辑了我的帖子，包括最新的更新和完整的HTML代码。在我的iPad（iOS8）上似乎可以工作，但在我的iPhone（iOS8）上无法工作。 - Brian Fleishman

让我们在聊天中继续这个讨论。 - Gildas.Tambo

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>

假设您希望在溢出时使div滚动。这在任何设备上都应该有效，不像vh和vw只有部分浏览器支持。

- Luke

Answer 3

你需要将body和html的高度都设置为100%;

CSS:

html, body {
    width:100%;
    height:100%;
}

- Florin Pop