Sticky Footer: Почему: после необходимости?

Question

В следующем коде используется код .page-wrap:after?

Теоретически, не должен ли липкий нижний колонтитул работать без этого? Почему это не так?

* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
.page-wrap { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -142px; 
 
} 
 
.page-wrap:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .page-wrap:after { 
 
    height: 142px; 
 
} 
 
.site-footer { 
 
    background: orange; 
 
}

<div class="page-wrap"> 
 
    
 
    Content! 
 
     
 
</div> 
 

 
<footer class="site-footer"> 
 
    I'm the Sticky Footer. 
 
</footer>

Answer 1

Это сделать зарезервированное пространство для колонтитула. Поскольку нижний колонтитул поднимается вверх из-за отрицательного поля на .page-wrap, должно быть пустое «зарезервированное» пространство внизу .page-wrap, так что содержимое внутри .page-wrap не попадает под .site-footer.

.page-wrap:after делает именно это, он добавляет пустое «зарезервированное» пространство для нижнего колонтитула для заполнения внизу .page-wrap.