响应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>
答
您可以使用尺寸与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; }
答
你必须给身体和HTML也是100%的高度;
CSS:
html, body {
width:100%;
height:100%;
}
答
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
那些部分支持几个浏览器
我不会说你*有*使用它们: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