Padding Bottom does not work [closed]

-1

I'm making the mobile version of my site, with two bars (one at the top with the logo and another at the bottom of the page with contact links). These bars are fixed, 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 correct using padding top. I tried doing the same with padding bottom, but it does not seem to work. Either a very large space is left blank or the bar continues to cover the last item.

    
asked by anonymous 15.10.2015 / 02:49

2 answers

1

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;
}
    
15.10.2015 / 05:53
0

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

    
15.10.2015 / 04:49