Question

我需要帮助，我正在尝试为移动设备/平板电脑建立一个网站，但问题是，只要我将浏览器宽度扩展到平板电脑尺寸，“loginD”div就会向下移动 - see this gif < / p>

这是我的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; }

抱歉，这件事搞砸了块代码，我需要保持相同高度的元素，只有宽度应该扩展才有效。

Answer 1

检查此代码段。在您当地的环境中。

\* {
  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>

Answer 2

嘿将高度选项从％更改为px 固定像素效果最佳。％始终与设备的视口一起使用，因此请尝试使用px insted of％

#headD {
    background-color: #414344;
    height: 25px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; }

当我扩展浏览器宽度时，CSS div向下移动

2 个答案: