<div id="page">
<!--상단 메뉴 영역-->
<nav class="gtco-nav">
<div class="container">
</div>
</nav>
<!-- Content 전용섹션 -->
<div class="gtco-content">
</div>
<!--하단 copyright 영역-->
<footer id="gtco-footer">
<div class="container">
</div>
</footer>
</div>
위의 코드에서 <!--하단 copyright 영역--> 부분을
브라우즈 화면의 최하단에 위치 시키는 방법입니다.
<style type="text/css">
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#page > div:not(nav):not(footer) {
flex: 1;
}
#gtco-footer {
margin-top: auto;
}
</style>
콘텐츠가 적을 때는 하단에 붙고, 콘텐츠가 많을 때는 자연스럽게 아래로 밀려나는 방식입니다.

참고로 position: fixed 방법은 footer가 항상 화면에 보이도록 고정하는 방식이라 콘텐츠를 가릴 수 있습니다.
자료가 도움이 되었다면 댓글과 평가 부탁합니다. 