-1

Estou fazendo a versão mobile do meu site, com duas barras (uma no topo com o logo e outra na base da página com links de contato). Essas barras estão com a posição fixed, aparecendo sobre uma lista ocupando 100% da tela. O problema é que a barra da base está tapando o ultimo item da lista. No topo consegui corrigir usando padding top. Tentei fazer o mesmo com padding bottom, mas não parece funcionar. Ou fica um espaço muito grande em branco ou a barra continua tapando o ultimo item.

1

2 Respostas 2

1

Isso acontece porque estás a adicionar position:absolute; à div principal que contém a lista (#source), quando isto não é necessário ser implementado.

Como já estás a adicionar position:fixed; ao #top-bar e ao .large-contact-sheet, que são as duas barras de navegação superior e inferior, evitas de estar a adicionar position:absolute; ao #source que é o conteúdo principal, pois esta propriedade não é necessária e não está ali a fazer nada, juntamente com outras propriedades que foram adicionadas por causa desta propriedade.

Limpando os estilos desnecessários implementados no #source, eis como o código irá ficar:

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

Só vais precisar desta propriedade no #source que é para compensar o tamanho height aplicado à class .large-contact-sheet que é de height:50px;.

Já que vamos na onda aproveito também para sugerir removeres outras propriedades da class .large-contact-sheet que são desnecessárias, principalmente os overflows, pois esta é a razão das barras de scroll indesejadas estarem ali a aparecer no final da página.
Com o código desnecessário removido ele ficará assim:

.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;
}
2
  • 1
    Não sei porque negativaram... Commented 16/10/2015 às 0:27
  • 1
    @renan tinha sido o usuário acima "25037" que após a sua resposta ter recebido votos negativos, ele entrou numa "maré de ódio" e saiu negativando não só esta minha resposta, mas todas as outras respostas/perguntas que ele conseguiu encontrar acessando o meu perfil. Mas já foi resolvido.
    – Chun
    Commented 16/10/2015 às 5:08
0

Rafael, use a propriedade overflow-x: hidden; para tirar o scroll inferior, e para o elemento que está sendo tapando coloque um margin-bottom somente no último elemento.

1
  • Apesar da barra-de-scroll no final da página ser o que mais se realça ao abrirmos a página do site, penso que não seja realmente isto que o Autor se refere e está a perguntar na sua pergunta.
    – Chun
    Commented 15/10/2015 às 5:25

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .