11.Nas_1


새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사


footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃

♨ 카랜더 일정 :
  • 링크

  • 첨부

  • 컨텐츠 정보

    본문

    \r\n
     
    \r\n\r\n
     
    \r\n
    HTML + CSS
    \r\n
    2012.02.18
    \r\n

    footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃

    \r\n\r\n
    \r\n\r\n
    TAG •
    \r\n
    \r\n
    \r\n
     
    \r\n\r\n
     
    \r\n
    \r\n

    footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃

    \r\n\r\n
    \r\n
    \r\n
    웹사이트 및 사이트를 만든 회사의 정보를 제공하는 footer의 위치는 대부분 맨 아래쪽에 위치합니다.
    사이트별 차이라면, 컨텐츠가 끝나는 부분에 위치하느냐 아니면 브라우저의 길이에 상관없이 항상 브라우저 하단에 위치하느냐 일 것입니다.
    \r\n
    한게임재팬에서 제작하고 있는 A프로젝트의 경우, div 레이아웃이면서 footer는 항상 브라우저 하단에 위치하도록 결정되었습니다.
    또한 header와 footer는 width 100% 이면서 백그라운드 색상이 있고, 컨텐츠 영역은 width 값이 고정되어 있습니다.
    \r\n
    지금부터 브라우저 길이에 상관없이 footer를 항상 브라우저 하단에 위치시키는 방법에 대해 알아보도록 하겠습니다.
    \r\n
    height100.gif
    \r\n
    높이를 100%로 한다는 것의 % 의 기준은 상위 엘리먼트의 높이 값입니다.
    그러므로 레이아웃 div 박스의 높이가 100%가 되려면, 상위 엘리먼트인 body 태그와 body의 상위 엘리먼트인 html 태그 역시 높이가 100%로 지정되어야 합니다.
    html, body { height: 100%; margin: 0; padding: 0; } 
    #header { height: 100px; background: #ddd; position: relative; z-index: 1; }
    #content-box { min-height: 100%; margin: -100px 0 -50px; }
    *html #content-box { height: 100%; }
    #content { padding: 100px 0 50px; } #footer { height: 50px; background: #ddd; }
    <div> header (height 100pixel) </div>
    <div>
    <div>
    <p>contents</p>
    <p>contents</p>
    <p>contents</p>
    </div>
    </div>
    <div> footer (height 50pixel) </div>
    \r\n
    위 소스를 도식적으로 나타내면 다음과 같습니다.(그림 상의 색상은 표현을 위한 것으로 CSS 소스와는 관련없음)
    height100_02.gif
    \r\n
    \r\n
    content-box에는 컨텐츠 길이에 따라 height 값이 조절되도록 [min-height:100%] 속성을 부여합니다. 단, IE에서는 min-height 속성이 구현되지 않으나 height가 min-height 역할을 하므로 IE용 핵을 사용하여 height:100% 속성을 부여합니다.
    \r\n
    header와 footer 은 width가 100% 이어야 하므로 content-box 안에 포함되지 않아야 하나 content-box에 height를 100%로 적용하였으므로, 브라우저의 높이는
    \r\n
      content-box 높이 100% + header 높이 100px + footer 높이 50px
    를 더한 값이 되므로 브라우저 높이 100%에 150px 이 더해져 원치 않는 스크롤이 생기게 됩니다.
    따라서, content-box 에는 [margin:-100px 0 -50px 0] 를, content 에는 [padding:100px 0 50px 0] 를, header에는 [position: relative; z-index: 1;] 값을 부여하여, header 는 content 위에 나타나고, 실제 컨텐츠는 header 아래쪽에서 시작되도록 합니다.
    그리고, content 박스는 아래쪽에 50px 의 패딩값을 가지므로, 길이가 길어져 스크롤이 생기더라도 footer가 컨텐츠 내용을 덮는 경우는 없을 것입니다.
    \r\n
    위 소스는 IE5.0 이상 7.0 이하 및 Firefox, opera 최신 버전에서 잘 동작합니다.
    \r\n
    \n
    [이 게시물은 관리자님에 의해 2013-11-18 21:29:50 11.H_BBS에서 이동 됨]
    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2



    office view

    관련자료

    댓글목록

    등록된 댓글이 없습니다.

    목록

    새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사




    Total 1,684 / 71 Page
    [ 메인샘플 - v3_amina ] 댓글 1

    \r\n모바일 아미나 테마스킨 V3을 pc모드에 올리고 싶습니다\r\n\r\n\r\n\r\n LV 4 심봉사\r\n 신고\r\n 글주소\r\n …

    [ usb2 3.5외장하드와 타임백업후 먹통 ]

    ###\r\n타임백업 usb2에 연결시 먹통\r\n■ https://11q.kr는 정보를 찾아 공유 합니다.. https://11q.kr

    [ 홈페이지 수정시 editplus 대용으로 간편한 notepad2_4.2.25_x86 입니다 ] 댓글 3

    ###홈페이지 수정시 editplus 대용으로 간편한 notepad2_4.2.25_x86 입니다totalcmd를 사용하는 분는notepad2_4…

    [ 시놀로지 NAS DS712+ 제품 리뷰사진 ]

    >\r\n>\r\n■ shimss home 는 내일을 위하여 정보를 찾\r\n아 공유 합니다. https://11q.kr.com\r\…

    [ azuploader 대용량 업로드 스킨 댓글 가능 변경 ] 댓글 3

    azuploader 대용량 업로드 스킨 댓글 가능 변경\r\n\r\n♠\r\n♠ shimss home 는 https://11q.kr.com 시놀…

    [ 일반 윈도우와 윈도우 서버와의 차이점은 무엇인가요? ]

    일반 윈도우 제품군 보다, 서버 제품군이 다음의 면에서 더 중요하게 다루고 있습니다.메모리의 최대 지원 크기많은 프로세서(CPU)의 수네트워크 …

    [ piwigo 설정) 모든언어가 활성화 되어 있으면 기본 LOGOUT 상태에 디랙토리 정보에 कोंकणी [I… ]

    piwigo 설정)모든언어가 활성화 되어 있으면 기본 LOGOUT 상태에 디랙토리 정보에कोंकणी [IN] 언어가 보이는것 디폴트( 한글언어)…

    [ 외부연결 또는스마트폰 lte 연결로 dsm/homepage avast 인터넷시큐리티 hanaro Telec… ]

    외부연결 또는 스마트폰 lte 연결로 dsm/homepage avast 인터넷시큐리티 hanaro Telecom inc 비공개 설정으로 연결 문…

    [ 공유기 포트개방 dmz와 포트포워딩 차이 ]

    서버사용자가 공유기 초기화 후 포트포워딩 입럭관리기 소일거리라면 dmz로 내부 ip 하나로 해결하세요>\r\n>\r\n>\r\n…

    [ 메일플러스_최종성공)시놀로지 mailplus 간단 설정및 수발신 만들기/알림 설정 dsm 제어판 설정_공유… ] 댓글 4

    공유기 포워딩 관련 일괄중지후메일 서버 기본포트 25 개방구글 계정을 단독으로 하나 만들어 기본 설정 합니다.>> 메일 발신을 구글 …

    [ 펌자료)리눅스 시스템 , 하드웨어 명령어 등 알아보기 ]

    리눅스 시스템 , 하드웨어 명령어 등 알아보기UNIX+Linux2007.04.03 01:01리눅스 시스템 , 하드웨어 명령어 등 알아보기우리가 …

    [ Acdsee20 HTML Album 만들기 ]

    Acdsee20 HTML Album 만들기 \r\n\r\n--------------------------------------\r\n♠ 출처는 …


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-07-05 03:49:08

    오늘의 홈 현황


    • 현재 접속자♨ 662 명
    • 오늘 가입자※ 0 명
    • 어제 가입자※ 8 명
    • 주간 가입자※ 17 명
    • 오늘 방문자 933 명
    • 어제 방문자 2,205 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,414,436 명
    • 전체 게시물※ 8,677 개
    • 전체 댓글수※ 24,827 개
    • 전체 회원수 11,089 명

    QR코드


    ☞ QR코드 스캔은 kakao앱 자체 QR코드

    알림 0








    최신글↑