与另一个div保持一定的距离

Question

我有一个登录框DIV，下面是另一个登录按钮DIV，它是登录框DIV的1％边距。

登录框div具有以下样式：

.login-box {
height: 39%;
width: 100%;
}

.login-box-wrap {
width: 30%;
height: 98%;
margin: 0 auto;
border: 1px solid #3f3f3f;
background-color: #609ac4;
border-radius: 5px 5px 5px 5px;
margin-top: 1%;
min-width: 250px;
max-width: 500px;
max-height: 350px;
min-height: 100px;
}

.logintextbox {
background-color: transparent;
border: none;
border-bottom-color: rgba(176, 221, 245, 1);
border-bottom-style: solid;
border-bottom-width: 2px;
width: 98%;
height: 32%;
font-size: 1.2em;
font-family: open sans;
color: white;
padding-left: 2%;
}

然后，当我缩小它时，按钮会重叠，如下所示：

这是登录按钮样式：

.login-button {
height: 5%;
width: 100%;
margin-top: 1%;
position: fixed;
}


.login-button-wrap {
width: 30%;
height: 100%;
margin: 0 auto;
min-width: 250px;
max-width: 500px;
min-height: 20px;
max-height: 31px;
}

#btnLogin {
height: 100%;
width: 100%;
background: linear-gradient(#73afda,#609ac4);
border: 1px solid #3f3f3f;
border-radius: 5px 5px 5px 5px;
font-family: Arial;
color: white;
font-size: 15px;
}

如何在所有分辨率下将按钮保持在10px / 1％左右的顶部

**编辑：**

这是HTML

<div class="login-box">
            <div class="login-box-wrap">
                <input id="txt_client_reference" type="text" class="logintextbox" placeholder="Client Reference" />
                <input id="txt_postcode" type="text" class="logintextbox" placeholder="Postcode" />
                <input id="txt_date_of_birth" type="text" class="logintextbox" placeholder="Date of Birth" />
            </div>
        </div>

        <div class="login-button">
            <div class="login-button-wrap">
                <asp:Button ID="btnLogin" runat="server" Text="Log in" CssClass="loginButton" OnClientClick="checkForm(); valid_postcode()" />
            </div>
        </div>

Answer 1

我可能在这个问题上有点遥远，但你在那里找到了固定的位置，这不再关心你的保证金了。