수다닷컴

화면 높이에 맞춰 푸터를 늘리는 방법이 있을까요?

흰두루 2025.09.13 댓글 3

페이지를 헤더, 본문, 푸터로 나눴는데 푸터 높이를 화면에 맞추는 방법을 모르겠어요.
본문 높이는 100%로 맞추는 예제를 찾았는데, 같은 방식으로 푸터에 적용하면 아래에 공간이 남네요.
헤더와 본문은 높이를 고정하고 푸터 높이를 화면에 맞게 조정하려면 어떻게 해야 할까요?
조언 부탁드립니다.

댓글 3

  • 세련 2025.09.13

    답변 감사합니다. 알려주신 코드로 급한 메인 페이지 문제를 해결했어요 ㅎㅎ
    처음엔 메인과 서브를 따로 만들려 했는데 헤더와 푸터를 같이 쓰려니 또 막히네요. 초보라 레이아웃 잡는 것도 어렵네요.
    다른 분들도 답변 감사해요.

  • 츠키코 2025.09.13

    제 컴퓨터에서는 그대로 적용하니 안 되더라고요. #wrap에 height:100%를 주고 #container에 보더를 포함해 위아래 마진을 조정하니 맞는 것 같아요.

  • 타키 2025.09.13

    ```css
    *{margin:0; padding:0;}
    html,body{height:100%;text-align:left;}
    #wrap{width:500px;height:100%;margin:0 auto;}
    #header{width:500px;height:100px;overflow:hidden;}
    #container{width:500px;height:100%;border:1px solid red;overflow:hidden;margin:-105px 0 0px;}
    ```

프로그램 개발일반 다른 글

목록