不需要的滚动条答案

【问题标题】：Unwanted Scroll Bar不需要的滚动条
【发布时间】：2020-11-28 02:52:40
【问题描述】：

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

【问题讨论】：

标签： css scroll scrollbar margin

【解决方案1】：

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

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

Fiddle

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

【讨论】：

【解决方案2】：

在html标签中使用overflow:hidden属性

html
{
  overflow: hidden;
}

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

默认情况下，如果是html标签，这个属性是自动的。

【讨论】：

【解决方案3】：

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

横向

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

html{ 溢出-y：隐藏； }

注：

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

【讨论】：