Unwanted Scroll Bar

css, margin, scroll, scrollbar

Solution

A quick fix is to add `overflow: hidden` to the CSS for your `#footer`.

Note: A scrollbar will still appear if your `#body` content flows out of the the viewport.

Fiddle

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

Problem

This is the second time I have encountered an unnecessary scrollbar, and the first time I fixed it by adding `body{margin:0;}`; however, I have no idea what is going on this time. Any ideas? HTML: ``` <html> <head> <link rel="stylesheet" type="text/css" href="Style-Sheets/style.css" />    <link rel="icon" href="Favicons/favicon.jpg" />  <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: (from style.css, which is (or should be) the only style sheet affecting the page) ``` 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; } ```

Original source