October 1, 2012
setting the width of my footer to 100% shows a scrollbar
Question by bigollo
Although I set the width of my footer to 100%, there it extends to more than 100% having a scroll bar in terms of width. Any ideas why? I know the problem is the width because when I remove the 100%, it does not show the scroll bar. The page is broken down to body>wrapper>footer
Here is my code:
#footer {
margin-top: 30px;
color: white !important;
padding-bottom: 15px;
background: black;
text-align: center;
padding: 20px;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
And there is the body css:
body {
font: normal 12pt Georgia, serif;
color: #111;
background: #990000;
margin: 0 auto;
text-align: center;
background-position: 50% 50%;
min-height: 100%;
margin:0;
padding:0;
height:100%;
}
And the wrapper css:
#wrapper {
min-height:100%;
position:relative;
}
Answer by Starx
This is happening because of the padding. See the illustration of your problem here.
When you use padding, the size gets added to the total height and width respectively.
Removing the padding will fix your problem. Demo
#footer {
margin-top: 30px;
color: white !important;
background: black;
text-align: center;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
Another good solution is to make the browser treat your element differently. by using box-sizing property.
#footer {
/* Add box-sizing */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
margin-top: 30px;
color: white !important;
padding-bottom: 15px;
background: black;
text-align: center;
padding: 20px;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
