Question

即使内容没有占据整个页面，我在所有浏览器中都有不需要的垂直滚动条。欢迎改进和改变css！

 <div id="header">
 </div>
 <div id="container">
     <div id="title"><h2>Admin</h2></div>
     <div id="content">
         <div class="login">
             <div>&nbsp</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">&nbsp;</p>
                 </form>
            </div>
        </div>
    </div>
<div id="footer">
    <p>Copyright &copy; 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;
}

http://jsfiddle.net/gZ9a8/

==== UPDATE =====

我已修好身高99％

Answer 1

从CSS元素中取出最小高度。这是一个example。以下是您想要对CSS代码执行的操作：

     #container {
        margin-left:auto;
        margin-right:auto;
        width:70%;
      }

这应解决垂直滚动条的任何问题。

Answer 2

我看到滚动条，但只有当我玩窗口大小时。我认为，因为你使用％作为高度，你可以删除#container min-height:80%;标记，因为这将消除溢出/滚动条问题。

当您使用15％的页眉和5％的页脚时，剩余的80％会自动填充容器。

另一种选择可能是在标题中使用position:relative标记，并添加top:15%;以拨入标题位置。或者您可以提供min-height:10%;和max-height:15%;来拨打标题大小。

如果您希望页脚始终位于底部，则可以在其中设置position:relative bottom:5%; css

Answer 3

simplest solution without editing ur css 


Remove height:100%; from body 


html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
color: #333399;
}

不需要的垂直滚动条

3 个答案: