How to go to an anchor on a page with little content?

Navigation
1

I'm creating a page using Bootstrap and would like to put some anchors in specific places, as the page has very little content, the element that represents the anchor does not go to the top when I click the link that redirects to it, the example below produces exactly what happens. 

.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>

In this example only You're on div-l1 is at the top of the page when I click Go to l1 , the other two do not work in a similar way, which do so that both work in the same way, that is, they are at the top of the page when I click on the corresponding link?

    
asked by anonymous 06.04.2015 / 02:06

1 answer

3

This happens because there is not enough space on the page for the div to go to the top, the page reaches as far as it can. Ideally you would fill the page somehow, for example, put min-height: 100%; on the divs, so they would be at least the height of the browser window. 

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>
    
06.04.2015 / 02:17
Add caption on a Map by the googlemaps API JQuery how to set a value in a field with CPF mask?