不需要的滾動條

這是我第二次遇到不必要的滾動條，並且第一次通過添加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; 
}

來源

2013-03-25 treboothjD6

速戰速決是添加overflow: hidden到您的#footer的CSS。

注意：如果您的#body內容流出視口，則滾動條仍會出現。

Fiddle

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

來源

2013-03-25 18:51:11

使用溢出：在html標記隱藏屬性作爲

html 
{ 
    overflow: hidden; 
}

它將刪除不必要的滾動條。

默認情況下，此屬性在html標記的情況下是自動的。

來源

2016-02-08 12:38:26

不需要的滾動條

回答

相關問題