Footer creating vertical scroll bar issue

Question

I have managed to get my Footer to go to the bottom of my page, but for some reason it has created a Vertical Scroll Bar on my pages which I don't want it to do.

This is my page layout at the moment (HTML):

<div class="wrapper">
    <div class="Header">
    </div>

    <div class="Main">
    </div>

    <div class="Footer">
    </div>
</div>

And this is the CSS that goes with this:

.wrapper
{
    position: relative;
    min-height: 100%;
}

.Header
{
    height: 83px;
    border: 0;
}

.Main
{
    padding-bottom: 100px;
}


.Footer
{
    background: #6a3d98; 
    position: absolute;
    bottom: 0px;
    height: 55px;
    width: 100%;
}

Here is a small picture of what happens:

https://i.stack.imgur.com/Kgams.jpg (Have to post link as won't let me upload pic)

I want the Footer to be stuck to the bottom of the page but not to create the scroll bar. If anyone knows how to do this please comment, Thanks.

Answer 1

Add overflow:hidden on the wrapper element.