7777 66

How can I get rid of the vertical scrollbar on my page? Here's the relevant CSS code I'm using:

* {margin:0;padding:0;} 

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#footer {position: relative;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer{margin-top: -150px; /* negative value of footer height */
    height: 150px;}

#footer {
border-top:gray 1px solid;
text-align:center;
}

(from cssstickyfooter.com)

I finally narrowed the problem down to the 1px gray border I'd like to put on top of the footer. It pushes things down and creates a scrollbar. How can I get rid of it but still have a border on my footer?

Thanks.

2 answers

0
points
This was chosen as the best answer

Increase the padding and negative margins to accommodate the extra 1px.

e.g.

#main {padding-bottom: 151px;}  /* must be same height as the footer borders and all */

#footer{margin-top: -151px; /* negative value of footer height */
    height: 150px;}

#footer {
border-top:gray 1px solid;
text-align:center;
}
Answered about 7 years ago by Tony Crockford
  • I should have realized, thanks so much! 7777 about 7 years ago
0
points

Actually, you may not really want to lose the scroll bar if your site contains a mix of pages with/without scrolling. The reason for this is that Firefox loses the scroll bar completely (IE does not) for non-scroll pages with the result that pages "jump" horizontally when navigating around. There are many CSS hacks to this, but the only one that will validate is to set your overall page height to 101% and live with the scroll.

Answered about 7 years ago by Anthony Grace