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.
2 Respostas
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;
}
-
1
-
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.– ChunCommented 16/10/2015 às 5:08
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.
-
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.– ChunCommented 15/10/2015 às 5:25