html – 响应式DIV填满整个屏幕

概述我正在尝试格式化 HTML DIV元素,以便它在移动设备上响应.我的目标是让潜水始终填充任何移动设备的100％宽度和高度,无论是ipad,iphone还是androd设备. I.E.不同大小的屏幕. 但是,我无法使用此代码执行此 *** 作.哪里和我错了？ 我的DIV元素： <!---Main Responsive DIV ---> <div class="fullscreen" id="full 我正在尝试格式化 HTML div元素,以便它在移动设备上响应.我的目标是让潜水始终填充任何移动设备的100％宽度和高度,无论是ipad,iphone还是androd设备. I.E.不同大小的屏幕.

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

我的div元素：

<!---Main Responsive div --->    <div  ID="fullscreen">    <!--- This is where we draw. --->    <div align="center" >    <canvas    ID="canvas"    wIDth="400"    height="250"    >    </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>

解决方法 您可以使用CSS3的vw和vh units进行大小调整

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

高清：

100vw = 100% of vIEwport wIDth100vh = 100% of vIEwport height1vmin = 1vw or 1vh,whichever is smaller1vmax = 1vw or 1vh,whichever is larger

更新：

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

总结

以上是内存溢出为你收集整理的html – 响应式DIV填满整个屏幕全部内容，希望文章能够帮你解决html – 响应式DIV填满整个屏幕所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。