This happens because you are adding position:absolute;
to div
main that contains the list ( #source
), when this is not necessary to be implemented.
Since you are already adding position:fixed;
to #top-bar
and .large-contact-sheet
, which are the top and bottom navigation bars, you avoid adding position:absolute;
to #source
which is the main content, because this property is not required and is not there to do anything along with other properties that have been added because of this property.
Clearing unnecessary styles implemented in #source
, here's how the code will look:
#source {
margin-bottom: 50px;
/* Ou padding-bottom: 50px; se preferires */
}
You will only need this property in the #source
which is to compensate for the height
size applied to the class .large-contact-sheet
which is height:50px;
.
Since we are on the wave, I also suggest you remove other properties of the class .large-contact-sheet
which are unnecessary, especially the overflows
, because this is the reason why the unwanted scroll bars are appearing at the bottom of the page < br>
With the unnecessary code removed it looks like this:
.large-contact-sheet {
height: 50px;
width: 100%;
background-color: #900;
text-align: center;
white-space: nowrap;
display: block;
position: fixed;
z-index: 5;
bottom: 0;
}