Question

这是我第二次遇到不必要的滚动条，第一次通过添加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>&nbsp<a class="navigation" href="index.html">Home</a>&nbsp<span class="verticle-bar">|</span>&nbsp<a class="navigation" href="about.html">About</a>&nbsp<span class="verticle-bar">|</span>&nbsp<a class="navigation" href="blah/index.html">blah</a>&nbsp<span class="verticle-bar">|</span>&nbsp<a class="navigation" href="blah2.html">blah2</a>&nbsp<span class="verticle-bar">|</span></p>
            </div>
            <div id="body">
            </div>
        </div>
        <div id="footer">
            <div class="footer">
                <span class="verticle-bar">|</span>&nbsp
                <a class="footer-link" href="">About The Developer</a>&nbsp
                <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;
}

Answer 1

快速解决方法是将overflow: hidden添加到#footer的CSS中。

注意：如果您的#body内容流出视口，则仍会显示滚动条。

Fiddle

#footer {
    overflow:hidden;
    position:relative;
    margin-top:-4em;
    /* negative value of footer height */
    height:4em;
    clear:both;
}

Answer 2

将html标签中的overflow：hidden属性用作

html
{
  overflow: hidden;
}

它将删除不必要的滚动条。

默认情况下，如果是html标记，则此属性为auto。

Answer 3

取决于您要隐藏滚动条的方向

水平

html { 溢出-x：隐藏; }
垂直

html { 溢出y：隐藏； }

N.B：

溢出：隐藏； =>水平和垂直方向都一样，因此请小心并了解您的实际需求。

不需要的滚动条

3 个答案: