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

Question

I’m creating a page using Bootstrap and would like to put some anchors in specific locations, it turns out that as the page has little content, the element that represents the anchor does not go to the top when I click on 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 the You’re in the div-L1 is at the top of the page when I click Go to L1, the other two do not work in the same way, what to do so that both work in the same way, IE, stay at the top of the page when I click on the corresponding link?

Answer 1

This is 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 in some way, for example, put min-height: 100%; on Divs, so they would have 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>