html - 强制 div 在移动设备上占据整个屏幕？ CSS, HTML

标签 html css mobile fullscreen divider

我有一张 224w x 400h 的图片。 漂浮在该图像上的是一个简单的表格。

我的目标是使包含该图像的 div + 叠加形式在移动设备上查看时占据整个屏幕。我尝试了各种组合，使用媒体 header 、视口(viewport)元和我从类似的堆栈溢出问题中拼凑而成的大量 css。我目前不知道下一步该做什么。

我也尝试过至少将 img+form 居中，但我放弃了它，因为它相对于移动设备屏幕尺寸不居中。 (而是将 div 推离屏幕并创建水平滚动条，就好像它认为移动设备屏幕非常宽一样。)

如何更改以便移动设备用我指定的 div 填满屏幕？ (或者至少，将 fullsrceen div 类置于移动设备的较小屏幕上。)非常感谢任何帮助!

当前 html

<!DOCTYPE html>
<html>
<head>
<title>Reg</title>
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

<link href="Form.css" rel="stylesheet">
</head>
<body>

<div class="fullscreen" id="fullscreen">

    <div style="position:relative">    
<img src="fbg.png" alt="" />
        <div style="position:absolute;left:0;top:0;">


            <div id"=main">
<form method="post" action="SMA_Send2.php">
<label for="form">
First Name: <input type="text" maxlength="20" name="Fname" required><br />
Last Name: <input type="text" maxlength="36" name="Lname" required><br />
Student ID: <input type="number" maxlength="4" name="Sid" required><br />
Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
<br />
<input type="submit" value="submit" name="submit">
</label>
</form>
            </div>

        </div>
    </div>
</div>

</body>
</html>

当前的CSS

#fullscreen {
        height: 100vh;
        width: 100vw;
        position:fixed;
        top:0;
        left:0;
    }
@media screen and (orientation:portrait) { height: 100vh;
            width: 100vw; }
@media screen and (orientation:landscape) {height: 100vh;
            width: 100vw; }

label {
    display: inline-block;
    position: relative;
    float: left;
    text-align: left;
    margin-right: 20px;
    width: 190px;
    padding: 5px;
}

input, textarea { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 190px; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    } 

input:hover, textarea:hover, 
input:focus, textarea:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 

select { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    height: 36px;
    width: 210px;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    }    



.form label { 
    margin-left: 10px; 
    color: #999999; 
    } 

.submit input { 
    width: 210px; 
    padding: 9px 15px;
    background: #617798; 
    border: 1; 
    font-size: 14px; 
    color: #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    }

input[type=submit] {
  border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 35px;
  width: 210px;
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
-moz-appearance: textfield;
}

最佳答案

如果您不尝试使用绝对和相对定位，我认为这会更容易。如果你想让图像和表格居中，试试这个:

#fullscreen {
        height: 100vh;
        width: 100vw;
    border: 1px solid black;
    background-image:url(http://placehold.it/224x400);
    background-repeat: no-repeat;
    background-position: center top;
    }
#formDiv {
    margin: auto;    
    width: 224px;
    padding-left: 12px;
}

label {
    display: inline-block;
    position: relative;
    float: left;
    text-align: left;
    margin-right: 20px;
    width: 190px;
    padding: 5px;
}

input, textarea { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 190px; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    } 

input:hover, textarea:hover, 
input:focus, textarea:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 

select { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    height: 36px;
    width: 210px;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    }    



.form label { 
    margin-left: 10px; 
    color: #999999; 
    } 

.submit input { 
    width: 210px; 
    padding: 9px 15px;
    background: #617798; 
    border: 1; 
    font-size: 14px; 
    color: #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    }

input[type=submit] {
  border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 35px;
  width: 210px;
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
-moz-appearance: textfield;
}
<div class="fullscreen" id="fullscreen">
        <div id="formDiv">
    
            <form method="post" action="SMA_Send2.php">
    
                First Name: <input type="text" maxlength="20" name="Fname" required><br />
                Last Name: <input type="text" maxlength="36" name="Lname" required><br />
                Student ID: <input type="number" maxlength="4" name="Sid" required><br />
                Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
                Device Type:<br />
                <select name="Dtype">
                <option value="iPad">iPad</option>
                <option value="iPhone">iPhone</option>
                <option value="AndroidTablet">Android Tablet</option>
                <option value="AndroidPhone">Android Phone</option></select><br />
                Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
                <br />
                    <input type="submit" value="submit" name="submit" />
            </form>
    
        </div>
    </div>

关于html - 强制 div 在移动设备上占据整个屏幕？ CSS, HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28730593/

上一篇：html - "And"带有 :hover 的 CSS 选择器

下一篇：javascript - 如何以这种方式使用 css 定位自动调整 html block 元素(附照片)

相关文章：

html - 将形状定位到网站

javascript - Jquery Slider 不适用于移动设备

html - width:100% 不适用于移动浏览器

jQuery Mobile 弹出窗口影响页面布局？

javascript - Facebook javascript api 和 iPad、Android

html - 垂直对齐标签与复选框

jquery - 不倾斜导航栏下拉仅 HTML5/CSS/jQuery

html - 子与父 Z-index 问题

javascript - 带按钮的自动幻灯片

html - 具有透明背景和伪元素的 CSS box-shadow

©2024 IT工具网  联系我们