4

这是我第二次遇到不必要的滚动条，我第一次通过添加来修复它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;
}
4

3 回答 3

8

一个快速的解决方法是overflow: hidden为您的#footer.

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

小提琴

#footer {
    overflow:hidden;
    position:relative;
    margin-top:-4em;
    /* negative value of footer height */
    height:4em;
    clear:both;
}
于 2013-03-25T18:51:11.057 回答
2

在 html 标记中使用 overflow:hidden 属性作为

html
{
  overflow: hidden;
}

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

默认情况下，如果是 html 标记，此属性是自动的。

于 2016-02-08T12:38:26.387 回答
0

根据您要隐藏滚动条的方向

  1. 横向

    html{溢出-x：隐藏；}

  2. 垂直

    html{溢出-y：隐藏；}

注意：

溢出：隐藏；=> 水平和垂直，所以要小心，知道你真正想要什么。

于 2020-11-27T18:52:40.603 回答