height 100% 주는법이 이해가 잘안가는데요

-----------헤더-----------메뉴 | 내용 |------------푸터------------
html, body { height: 100%; }#wrapper { min-height: 100%;}#header{}#menu{}#content {}#footer{}* html #wrapper { height: 100%; }

height 값을 컨텐츠 내용의 높이와 상관없이 브라우저에 100% 로 맞추고 싶어서 기존 설명에 나온 소스를
위와같이 적용했습니다. min-height: 100%; - 이부분을 content 에 넣으면 아무런 반응이 없고, 전체를 감싸는 div인
wrapper 에 넣으면 100% 가 되긴하는데 footer 는 딸려내려오질 않습니다.
height 100% 로 주는 부분 설명좀 부탁드려봅니다

댓글 2

  • 갅쥐누뉨 2025.11.27

    흠...간단하게 wrapper에 height:100%를 주고 header, footer의 높이값만큼 마이너스 margin을 주면 됩니다.
    이런 방법 아니더라도 많은 방법이 있으니 여러가지 실험(?)을 해보면서 몸으로 익히는게 좋죠.

  • 나슬 2025.11.27

    wrapper의 height가 100%가 아니기 때문에 content의 height를100%로 주셔도 당연히 전체 height만큼 인식하지 않죠.. wrapper안에 content가 있는거 아니예요? 당연 wrapper에 먼저 100%를 주셔야죠..
    footer를 밑으로 내리려고 하시는거면..
    wrapper에 position:relative;를 주시구요..
    footer에 left:0; bottom:0 주시면 wrapper안에서 footer가 하단으로 붙

프로그램 개발일반 다른 글

목록