即使内容没有占据整个页面,我在所有浏览器中都有不需要的垂直滚动条。 欢迎改进和更改 css!
<div id="header">
</div>
<div id="container">
<div id="title"><h2>Admin</h2></div>
<div id="content">
<div class="login">
<div> </div>
<form method="post" action="/admin/index.php">
<p><input type="text" name="username" value="" placeholder="Username"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p><input type="submit" name="login" class="button" value="Send"></p>
<p class="error"> </p>
</form>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2010-2013</p>
</div>
这是css文件
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
color: #333399;
}
#header{
min-height:15%;
}
#container {
min-height:80%;
margin-left:auto;
margin-right:auto;
width:70%;
}
#footer {
text-align: center;
min-height:5%;
}
#title{
position:relative;
background-color:#BAB3D6;
padding:10px 0px 10px 10px;
margin-left:auto;
margin-right:auto;
margin-bottom:3px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#content{
padding:5px 5px 5px 5px;
border:2px solid #BAB3D6;
position:relative;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.button{
background-color:#BAB3D6;
border:0px;
display:inline-block;
padding:6px 20px;
text-decoration:none;
color: #333399;
cursor:pointer;
}
.button:hover {
background-color:#0061a7;
color: white;
}
.button:active {
position:relative;
top:1px;
}
.error{
font-weight: bold;
color:red;
}
form input[type="text"] {
border: 2px solid #BAB3D6;
font-size: 85%;
color: #333399;
font-family: Arial, Helvetica, sans-serif;
padding: 3px;
}
form input[type="password"] {
border: 2px solid #BAB3D6;
font-size: 85%;
color: #333399;
font-family: Arial, Helvetica, sans-serif;
padding: 3px;
}
.login p {
text-align: center;
}
====更新=====
我已经修复了 body 高度99%
最佳答案
从您的 CSS 元素中取出最小高度。这是一个 example .以下是您想对 CSS 代码执行的操作:
#container {
margin-left:auto;
margin-right:auto;
width:70%;
}
这应该可以解决垂直滚动条的任何问题。
关于css - 不需要的垂直滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20672015/