Question

我正在尝试格式化HTML DIV元素，以便它在移动设备上响应。我的目标是让潜水始终填充任何移动设备的100％宽度和高度，无论是ipad，iphone还是androd设备。 I.E.不同大小的屏幕。

但是我无法使用此代码来执行此操作。我哪里出错？

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

更新

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

Answer 2

你必须给身体和html的高度100％;

CSS：

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

Answer 3

＆＃13;

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

＆＃13;

<div>
</div>

＆＃13;

这假定您希望div在溢出时滚动。应该适用于任何设备，与vh和vw部分支持少数浏览器不同

响应式DIV填满整个屏幕

3 个答案: