Question

我有登录页面，中间有 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 内。

Answer 1

无论内容高度如何，此方法都会为您提供 true 垂直和水平居中（基于this article）

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

<强> Check out the fiddle

Answer 2

问题是您将bottom:0;放在#login上。我不完全确定为什么会破坏它，但是如果你删除它，它就可以了。

Fiddle

Answer 3

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

Answer 4

Fiddle

我无法抗拒一路设计;）

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

要使按钮向右浮动但仍然没有实际浮动：

display: block;
margin-left: auto;

希望有所帮助

Answer 5

检查更新的小提琴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;
}

Answer 6

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

垂直展开Div以适合内容

6 个答案: