3

我有登录页面，中间有一个div。我已经设置了高度，它非常适合。但是，如果我在div的顶部添加验证错误，则底部的按钮会被推到div之外。页面有点复杂，但我已经将其简化为以下 HTML 和 CSS

<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div id="content">
        <form action="/Account/LogIn" method="post">
            <div id="login" name="login">
                <div id="validation-errors">
                    <ul>
                        <li>
                            One or more errors here
                        </li>
                    </ul>
                </div>
                <label>Email:</label> <input type="email" name="email"> <br/>
                <label>Password:</label> <input type="password" name="password"> <br/>
                <input id="loginBtn" type="submit" value="Login" />
            </div>
        </form>
    </div>
</body>
 </html>

和CSS：

#content {
     position: absolute;
     top: 50%;
     left: 0px;
     width: 100%;
     height: 0px;
     overflow: visible;
     visibility: visible;
     display: block;
 }
 #login {
     background-color:#85ADFF;
     width: 350px;
     height: 100px;
     position: absolute;
     top:-100px;
     bottom:0;
     left:0;
     right:0;
     margin:auto;
 }
 #loginBtn {
     float: right;
}

您可以在http://jsfiddle.net/9jA2F/查看它

即使显示验证错误，我应该进行哪些更改以使登录按钮保持在蓝色框div中。如果您删除验证错误 div，它似乎工作正常，即按钮位于蓝框div内。

4

6 回答 6

2

无论内容高度如何，此方法都会为您提供真正的垂直和水平居中（基于这篇文章）

#content {
    display: table;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#content form{
    top: 50%;
    width: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: static;
}

#login {
    background-color:#85ADFF;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -50%;
    text-align: left;
}

看看小提琴

于 2013-07-10T17:03:17.793 回答
1

小提琴

我无法抗拒一路设计；）

问题是，一旦您浮动一个元素（如按钮），它就会脱离流程，因此容器不会将其包含在计算的自动高度中。

要使按钮正确浮动但实际上仍不浮动：

display: block;
margin-left: auto;

希望能帮助到你

于 2013-07-10T17:21:11.833 回答
1

问题是你穿上bottom:0;了#login。我不完全确定为什么这会破坏它，但如果你删除它，它会起作用。

小提琴

于 2013-07-10T16:37:32.870 回答
1

删除height: 100px;和top: -100px;从#login.

检查这个：http: //jsfiddle.net/9jA2F/8/。

#content {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 0px;
    overflow: visible;
    visibility: visible;
    display: block;
}

#login {
    background-color:#85ADFF;
    width: 350px;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

#loginBtn {
    float: right;
}
于 2013-07-10T16:39:36.823 回答
0

检查更新的小提琴http://jsfiddle.net/9jA2F/4/ 

#loginBtn {
position: absolute;
right: 0; bottom: 0;
}
#login {
background-color:#85ADFF;
width: 350px;
height: 100px;
position: relative;
top:-100px;
bottom:0;
left:0;
right:0;
margin:auto;
}
于 2013-07-10T16:39:10.770 回答
-2

为什么不让 div 用 height:auto 扩展，并给它填充以保持元素和 div 边界之间的距离。这样，如果填充错误，它可以伸展，如果没有消息，它可以收缩。您的 jsfiddle 上的错误并没有消失，所以我无法测试它，但从这里开始并继续尝试！

于 2013-07-10T16:37:52.713 回答