我有一个登录页面，中间有一个div。我已经设置了高度，它非常适合。但是，如果我在 div 顶部添加 validation errors，底部的 button 会被推到 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/ 查看它
我应该做哪些更改才能使 Login 按钮保留在蓝色框 div 中，即使在显示验证错误 时也是如此。如果您删除验证错误 div，它似乎工作正常，即按钮位于蓝色框 div 内。
最佳答案
无论内容高度如何(基于 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;
}
关于html - 垂直展开 Div 以适应内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17576013/