我需要帮助，我正在尝试为移动设备/平板电脑制作一个网站，但问题是，一旦我将浏览器宽度扩展到平板电脑大小，“loginD”div 就会向下移动 - see this gif
这是我的html
<body>
<div id="bodyD">
<div id="headD">
<h1><App Name</h1>
</div>
<div id="loginD">
<form runat="server" name="form1">
<h2>Login</h2><br />
<asp:Label ID="lblUsername" runat="server" Text="Account No" CssClass="aspLabel"></asp:Label><br />
<asp:TextBox ID="edtUsername" runat="server" CssClass="aspText"></asp:TextBox><br />
<asp:Label ID="lblPassword" runat="server" Text="Password" CssClass="aspLabel"></asp:Label><br />
<asp:TextBox ID="edtPassword" runat="server" CssClass="aspText"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" Text="Login" CssClass="aspText" />
</form>
</div>
</div>
这是我的CSS
\* {
margin: 0;
padding: 0; }
body {
width: 100%;
height: 100vh; }
#bodyD {
background-color: #fff;
width: 100%;
height: 100%; }
#headD {
background-color: #414344;
height: 15%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
#headD h1 {
position: absolute;
color: #dedfe0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 35px;
margin-left: 5%;
margin-right: 5%;
padding-top: 5% }
#loginD {
padding-top: 75%;
margin-left: 5%;
margin-right: 5%;
position: relative; }
#loginD h2 {
color: #afafaf;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 30px;
}
#loginD .aspLabel {
color: #afafaf;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
}
#loginD .aspText {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
width: 100%;
border-radius: 5px;
border: 1px grey solid;
/*background: none;*/
-webkit-appearance: none;
}
#btnSubmit {
color: #afafaf;
margin-top: 10px;
border: 1px grey solid;
background: none;
-webkit-appearance: none; }
抱歉，这件事弄乱了 block 代码，我需要元素保持相同的高度，只有宽度应该扩大，这是可行的。
最佳答案
检查此代码片段。在您的本地环境中。
\* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
}
#bodyD {
background-color: #fff;
width: 100%;
height: 100%;
}
#headD {
background-color: #414344;
height: 15%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#headD h1 {
position: absolute;
color: #dedfe0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 35px;
margin-left: 5%;
margin-right: 5%;
padding-top: 5%
}
#loginD {
padding-top: 5rem;
margin-left: 5%;
margin-right: 5%;
position: relative;
}
#loginD h2 {
color: #afafaf;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 30px;
}
#loginD .aspLabel {
color: #afafaf;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
}
#loginD .aspText {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
width: 100%;
border-radius: 5px;
border: 1px grey solid;
/*background: none;*/
-webkit-appearance: none;
}
#btnSubmit {
color: #afafaf;
margin-top: 10px;
border: 1px grey solid;
background: none;
-webkit-appearance: none;
}<body>
<div id="bodyD">
<div id="headD">
<h1>
<App Name</h1>
</div>
<div id="loginD">
<form runat="server" name="form1">
<h2>Login</h2><br />
<asp:Label ID="lblUsername" runat="server" Text="Account No" CssClass="aspLabel"></asp:Label><br />
<asp:TextBox ID="edtUsername" runat="server" CssClass="aspText"></asp:TextBox><br />
<asp:Label ID="lblPassword" runat="server" Text="Password" CssClass="aspLabel"></asp:Label><br />
<asp:TextBox ID="edtPassword" runat="server" CssClass="aspText"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" Text="Login" CssClass="aspText" />
</form>
</div>
</div>关于html - 当我扩展浏览器宽度时，CSS div 向下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48238522/