響應DIV填充整個屏幕

我想格式化HTML DIV元素，以便它在移動設備上響應。我的目標是無論是iPad，iPhone還是androd設備，潛水始終能夠滿足任何移動設備的寬度和高度的100％。 I.E.不同大小的屏幕。響應DIV填充整個屏幕

但是我無法得到這段代碼。我和哪裏出錯了？

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

來源

2014-09-25 Brian Fleishman

您可以使用尺寸與CSS3的vw和vhunits

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

來源

2014-09-25 14:08:00

我不會說你*有*使用它們：http://caniuse.com/#search=vh – Luke 2014-09-25 14:10:25

啊.. ...我從來沒有新的視口設置。 Thaks。 – 2014-09-25 14:11:51

如果平板電腦用戶從縱向模式轉爲橫向模式，會自動調整大小嗎？ – 2014-09-25 14:13:47

你必須給身體和HTML也是100％的高度;

CSS：

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

來源

2014-09-25 14:07:53

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那些部分支持幾個瀏覽器

來源

2014-09-25 14:13:03 Luke

響應DIV填充整個屏幕

回答

相關問題