强制 div 占据移动设备上的整个屏幕？CSS、HTML

Question

强制 div 占据移动设备上的整个屏幕？CSS、HTML

syl*_*cat 2 html css mobile fullscreen divider

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

我的目标是使包含该图像+覆盖形式的 div 在移动设备上查看时占据整个屏幕。我尝试了使用媒体标头、视口元数据和大量我从类似的堆栈溢出问题中拼凑而成的 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>

Run Code Online (Sandbox Code Playgroud)

当前的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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

BSM*_*SMP 5

我认为如果您不尝试使用绝对和相对定位来做到这一点，这会更容易。如果您希望图像和表单居中，请尝试以下操作：

#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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，11 月前
查看次数：	21929 次
最近记录：	8 年前