这是我第二次遇到不必要的滚动条，也是第一次通过添加 body{margin:0;} 修复它；但是，我不知道这次发生了什么。有什么想法吗？
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style-Sheets/style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="Style-Sheets/ie.css" /><![endif]-->
<!--[if !IE 7]><link rel="stylesheet" type="text/css" href="Style-Sheets/!ie7.css" /><![endif]-->
<!--[if OPERA]><link rel="stylesheet" type="text/css" href="Style-Sheets/opera.css" /><![endif]-->
<link rel="icon" href="Favicons/favicon.jpg" />
<!--<base target="_blank" />-->
<title>Home</title>
</head>
<body>
<div id="wrap">
<div id="header">
<p class="title">Title</p>
<p class="nav-down"><span class="verticle-bar">|</span> <a class="navigation" href="index.html">Home</a> <span class="verticle-bar">|</span> <a class="navigation" href="about.html">About</a> <span class="verticle-bar">|</span> <a class="navigation" href="blah/index.html">blah</a> <span class="verticle-bar">|</span> <a class="navigation" href="blah2.html">blah2</a> <span class="verticle-bar">|</span></p>
</div>
<div id="body">
</div>
</div>
<div id="footer">
<div class="footer">
<span class="verticle-bar">|</span> 
<a class="footer-link" href="">About The Developer</a> 
<span class="verticle-bar">|</span>
</div>
</div>
</body>
</html>
CSS:(来自 style.css，它是(或应该是)影响页面的唯一样式表)
html {
height:100%;
margin:0;
padding:0;
background-color:#FFFFFF;
text-align:center;
font-family:arial;
line-height:1.5;/*test*/
color:black;
}
body {
margin:0;
height:100%;
}
p {
margin:0;
padding:0;
}
#wrap {
min-height:100%;
}
#header {
z-index:2;
position:fixed;
top:0;
left:0;
right:0;
height:4.25em;
background-color:#6D8CE7;
font-family:gabriola;
line-height:1em;
letter-spacing:0.2em;
}
.title {
font-size:3em;
line-height:1.0em;
color:white;
}
#body {
margin-left:5em;
margin-right:5em;
padding-top:4.25em;
overflow:auto;
padding-bottom:4em; /* must be same height as footer */
}
#footer {
position:relative;
margin-top:-4em; /* negative value of footer height */
height:4em;
clear:both;
}
.footer {
position:absolute;
left:0;
right:0;
bottom:0;
}
.verticle-bar {
color:black;
font-family:gabriola;
}
a.navigation:link {
text-decoration:none;
color:black;
}
a.navigation:visited {
text-decoration:none;
color:black;
}
a.navigation:hover {
text-decoration:underline;
color:black;
}
a.navigation:active {
text-decoration:underline;
color:black;
}
.footer-link {
font-family:gabriola;
}
a.footer-link:link {
text-decoration:none;
color:#CC5500;
}
a.footer-link:visited {
text-decoration:none;
color:#CC5500;
}
a.footer-link:hover {
text-decoration:underline;
color:#CC5500;
}
a.footer-link:active {
text-decoration:underline;
color:#CC5500;
}
最佳答案
一个快速修复方法是将 overflow: hidden 添加到 #footer 的 CSS。
注意:如果您的 #body 内容流出视口(viewport)，滚动条仍会出现。
#footer {
overflow:hidden;
position:relative;
margin-top:-4em;
/* negative value of footer height */
height:4em;
clear:both;
}
关于css - 不需要的滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15622386/