我正在尝试格式化
HTML DIV元素,以便它在移动设备上响应.我的目标是让潜水始终填充任何移动设备的100%宽度和高度,无论是ipad,iphone还是androd设备. I.E.不同大小的屏幕.
但是,我无法使用此代码执行此操作.哪里和我错了?
我的DIV元素:
id="canvas"
width="400"
height="250"
style="border:3px dashed #000000;">
我的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;
}