不需要的滚动条
不需要的滚动条
提问于 2013-03-26 02:45:15
这是我第二次遇到不必要的滚动条，第一次我通过添加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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-03-26 02:51:11
一种快速的解决方法是将overflow: hidden添加到#footer的CSS中。
注意:如果#body内容流出视口，仍会出现滚动条。
Fiddle
#footer {
overflow:hidden;
position:relative;
margin-top:-4em;
/* negative value of footer height */
height:4em;
clear:both;
}Stack Overflow用户
发布于 2016-02-08 20:38:26
在html标记中使用overflow:hidden属性作为
html
{
overflow: hidden;
}它将删除不必要的滚动条。
默认情况下，对于html标记，此属性为auto。
Stack Overflow用户
发布于 2020-11-28 02:52:41
根据您想要隐藏滚动条的方向
- Horizontally
html{ overflow-x: hidden；}
垂直
html{ overflow-y:隐藏；}
注：
overflow:隐藏；=>水平和垂直，所以要小心，知道你真正想要的是什么。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15622386
复制相关文章
相似问题
腾讯云开发者
