Ответственный DIV для заполнения всего экрана

Question

Я пытаюсь отформатировать элемент HTML DIV, чтобы он реагировал на мобильные устройства. Моя цель состоит в том, чтобы погружение всегда заполняло 100% ширины и высоты любого мобильного устройства, будь то устройство ipad, iphone или androd. И.Е. экраны разных размеров.

Я не могу получить этот код, чтобы сделать это, однако. Где и я ошибаюсь?

Мой 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 и 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 

Update:

@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

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, которые частично поддерживают несколько браузеров.