2

Estou criando uma página utilizando Bootstrap e gostaria de colocar algumas ancoras em locais específicos, acontece que como a página tem pouco conteúdo, o elemento que representa a ancora não vai para o topo quando clico no link que redireciona para ele, o exemplo abaixo produz exatamente o que acontece.

.div-margin {
    margin-top: 80px
}
<a href="#l1">Ir para l1</a><br/>
<a href="#l2">Ir para l2</a><br/>
<a href="#l3">Ir para l3</a><br/>
<div id="l1" class="div-margin"><p>Você está na div-l1</p></div>
<div id="l2" class="div-margin"><p>Você está na div-l2</p></div>
<div id="l3" class="div-margin"><p>Você está na div-l3</p></div>

Nesse exemplo somente o Você está na div-l1 fica no topo da página quando clico em Ir para l1, os outros dois não funcionam de maneira semelhante, o que fazer para que ambos funcionem da mesma maneira, ou seja, fiquem no topo da página quando eu clicar no link correspondente?

1 Resposta 1

4

Isso acontece porque não existe espaço suficiente na página para a div ir até o topo, a página chega até onde pode. O ideal seria você encher a página de alguma forma, por exemplo, colocar min-height: 100%; nas divs, assim elas teriam no mínimo a altura da janela do navegador.

body, html {
    height:100%;
}

.div-margin {
    margin-top: 80px;
    min-height:100%;
}
<a href="#l1">Ir para l1</a><br/>
<a href="#l2">Ir para l2</a><br/>
<a href="#l3">Ir para l3</a><br/>
<div id="l1" class="div-margin"><p>Você está na div-l1</p></div>
<div id="l2" class="div-margin"><p>Você está na div-l2</p></div>
<div id="l3" class="div-margin"><p>Você está na div-l3</p></div>

Você deve fazer log-in para responder a esta pergunta.

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