Padding Bottom does not work

Question

I’m making the mobile version of my site, with two bars (one at the top with the logo and the other at the bottom of the page with contact links). These bars are with the Fixed position, appearing on a list occupying 100% of the screen. The problem is that the base bar is covering the last item in the list. At the top I was able to fix using top padding. I tried to do the same with padding bottom, but it doesn’t seem to work. Either it gets a very large blank or the bar keeps blocking the last item.

Answer 1

That’s because you’re adding position:absolute; à div main listing (#source), when this is not necessary to be implemented.

As you’re already adding position:fixed; at the #top-bar and to the .large-contact-sheet, which are the two upper and lower navigation bars, you avoid adding position:absolute; at the #source which is the main content as this property is not required and is not doing anything there, along with other properties that have been added because of this property.

Cleaning up unnecessary styles implemented in #source, here’s how the code will look:

#source {
    margin-bottom: 50px;
    /* Ou padding-bottom: 50px; se preferires */
}

All you’re gonna need is this property on #source which is to compensate for the size height applied to the class .large-contact-sheet that is of height:50px;.

Since we are going on the wave I also suggest you remove other properties from the class .large-contact-sheet which are unnecessary, in particular overflows, because this is the reason the unwanted scroll bars are there to appear at the bottom of the page.
With unnecessary code removed it will look 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;
}

Answer 2

Rafael, use the property overflow-x: hidden; to take out the bottom scroll, and to the element being covered put a margin-bottom only in the last element.