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 / 82 Page
    [ dsm 6.1 에서 6.1.1로 업그래이드 하고 부팅 불가능.,..복구대응 .재설치 진행 방법 ]

    dsm 6.1 에서 6.1.1로 업그래이드 하고 부팅 불가능.,...2개의 시놀로지 사용중입니다 1개 는 보이는데 ( ds3615는 업데이트 하…

    [ apkeditpro 의 logomakerplus 로 아이콘 만들어 수정하기 ]

    logomakerplus로 아이콘 배너 png파일저장 합니다apkeditpro 수정- logomakerplus로생성돈 png파일지정-저장 완료후…

    [ 시놀로지 2대운영 저의 환경 hdd구성 내용 ]

    시놀로지 2대운영 저의 환경 hdd구성 내용제가 사용중인 환경입니다windows 10 pro vmware workstation 14ssd부팅 및…

    [ 해결)kcaptcha 자동등록방지가 뜨지 않습니다..저의 경우 해결 및 문제점 정보 ]

    자동등록방지가 뜨지 않습니다..저의 경우 파일 수정중common.php 파일 1줄이 빈줄이 있어kcaptcha 자동등록방지가 뜨지 않습니다아래와…

    [ [11q.kr/g5 수정 _test 서버 검증]댓글에 위지윅 에디터 붙이기(스마트에디터2) ] 댓글 6

    [11q.kr/g5 수정 _test 서버 검증]댓글에 위지윅 에디터 붙이기(스마트에디터2)적용버전 [보안패치]그누보드 5.2.9.8.1 버전 사…

    [ RaiDrive 다운로드 및 시놀로지 webdav or u5pvr sftp 서버 드라이브 연결 하기 ]

    ■ ▶RaiDrive 다운로드무료 프로그램이며, 자유롭게 다운받아 사용하면 됩니다.https://www.raidrive.com/ko/downlo…

    [ U5 PVR 소프트웨어 공개[2018.04.10]_old버전_5/17일자 업데이트 후 <3차> 확인중입니… ] 댓글 7

    5/17일자 업데이트 후<3차> 확인중 kodi 사용버전 링크 참조 바랍니다처음에 펌웨어 업글 하고응급조치 사용 중입니다. 기존 4/…

    [ 리눅스의 nano 편집기 사용법 ] 댓글 5

    리눅스의 Nano 에디터 단축키nano edit synology/xpenology vi edit 대응간단 패키지 설치하여 구동하기https://…

    [ https://www.iptv-epg.com/channels 만든 정보 ] 댓글 3

    www.iptv-epg.com/channels에서 epg를 만들어 봤습니다My EPG XML link:http://iptv-epg.com/???…

    [ 작업_중) DSM 6.2_ds3615 jun's Loader 103b 설치 작업 ( 서버 ds918p to… ] 댓글 1

    변경 작업 준비 >>모든 서버 최신 버전으로 업데이트 진행 완료 확인만 하고 HDD 삭제기존 918 사용상태주의) dsm 설치된 HD…

    [ 작업중)노트북에 네트브 usb idVENDOR 헤놀로지 설치전 알아보기 및 USB VIEW R530 ] 댓글 1

    네이티브 102b dsm6.1 가능해서 설치 정상 네트워크 찾아 습니다.vistualbox 및 vmware 랜 연결 찾지 못함//vmware에서…

    [ 실패)시놀로지 서베일런스에서 usb 카메라 사용하기 ]

    pc의 usb 카메라를 이용하여시놀로지 서베일런스에서 usb 카메라 사용하기https://www.clien.net/service/board/cm…

    [ 내장 하드 드라이브를 esata 하드 드라이브로 보는 Xpenology 문제 수정 ]

    dsm하드웨어 정보 확인 방법 / 내장 하드 드라이브를 esata 하드 드라이브로 보는 Xpenology 문제 수정DS3617xs현재 DSM 버…

    [ 성공)synoboot-ds918_Juns_Mod_v1.04b 작업 테스트 _DSM Version: 6.2.1… ] 댓글 35

    성공)synoboot-ds918_Juns_Mod_v1.04b 작업 테스트 _DSM Version: 6.2.1-23824 신규 설치 성공회원139…


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-07-01 15:41:00

    오늘의 홈 현황


    • 현재 접속자♨ 657 명
    • 오늘 가입자※ 0 명
    • 어제 가입자※ 4 명
    • 주간 가입자※ 12 명
    • 오늘 방문자 1,633 명
    • 어제 방문자 1,787 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,406,683 명
    • 전체 게시물※ 8,671 개
    • 전체 댓글수※ 24,812 개
    • 전체 회원수 11,078 명

    QR코드


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

    알림 0








    최신글↑