바닥글을 맨 아래에 유지

4345 단어 htmlcsstutorialwebdev
페이지 바닥글은 항상 페이지 맨 아래에 유지되어야 합니다. 일부는 매우 간단하지만 완료하는 데 1-2시간이 걸리는 어려운 작업일 수 있습니다. 아마 당신은 그것에 붙어 있기 때문에 지금 이것을 읽고 있습니다. 바닥글이 속한 위치에 유지하는 방법을 2단계(설명 포함)로 보여드리겠습니다.

TL;DR 코드를 보려면 맨 아래로 이동하십시오.


1- 본문 아래에 바닥글을 추가한 다음 .footer 클래스를 추가한 다음 이러한 속성을 클래스에 추가합니다.

.footer {
    position: absolute;
    background-color: #333;
    color: white;
    width: 100%;
    bottom: 0;
}


설명 :
  • 바닥글에 절대 위치를 넣으면 문서 흐름에서 제거되므로 자유롭게 새 위치를 지정할 수 있습니다.
  • 절대 위치이기 때문에 bottom: 0을 지정합니다. 그러나 이렇게 하면 바닥글이 페이지 하단으로 이동하지 않고 대신 우리의 경우 본문인 포함 블록에 상대적으로 배치됩니다.



    • 2- 이제 바닥글과 머리글을 포함한 모든 페이지 콘텐츠를 래핑하는 본문 아래에 HTML 요소를 만들고 이 요소에 클래스를 추가하고 .mainContainer라고 부르겠습니다.

    .mainContainer {
    position: relative;
    min-height: 100vh;
}


    Magic!, 이제 바닥글이 페이지 하단에 있습니다.
    설명 :
  • position:absolute가 있는 요소가 position: relative인 요소에 포함된 경우 상위 요소에 따라 배치됩니다.
  • min-height : 100vh를 지정하면 mainContainers 높이가 항상 브라우저 페이지 높이의 100%를 차지함을 의미합니다.

    • 최종 결과로 이제 mainContainer에 포함된 페이지 하단에 바닥글이 있습니다.

    TL;DR 여기 코드가 있습니다



    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <div class="mainContainer">
        <div>
            My content
        </div>
        <footer class="footer">
            My footer
        </footer>
    </div>
</body>
</html>

    귀하의 main.css에서

    .mainContainer {
    position: relative;
    min-height: 100vh;
}

.footer {
    position: absolute;
    background-color: #333;
    color: white;
    width: 100%;
    bottom: 0;
}



  • 할 수 있습니다.
  • 내 웹사이트iLoveSemicolons.io에서 더 많은 기사/자습서 및 오픈 소스 프로젝트
    • 를 확인하십시오.

    즐거운 코딩하세요 :)
    Hadoop - mapreduce 사례 - map 엔 드 조인
    좋 은 코드 통계 도 구 를 소개 하 다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage