> 웹 프론트엔드 > HTML 튜토리얼 > 페이지 하단에 바닥글 태그를 배치하는 방법

페이지 하단에 바닥글 태그를 배치하는 방법

php中世界最好的语言
풀어 주다: 2018-01-23 10:41:34
원래의
5370명이 탐색했습니다.

이번에는 바닥글 태그를 페이지 하단에 넣는 방법과 페이지 하단에 바닥글 태그를 넣는 주의사항에 대해 알려드리겠습니다.

요구 사항: 페이지 내용이 짧고 브라우저 높이를 지원할 수 없지만 바닥글을 창의 가장 낮은 끝에 배치하려는 경우가 있습니다.

아이디어: 바닥글 상위 레이어의 최소 높이는 100%이고 바닥글은 상위 레이어 위치를 기준으로 완전히 아래쪽(하단: 0)으로 설정되며 바닥글 높이는 상위 레이어에서 예약되어야 합니다. 층.

html 코드 :

<!-- 父层 -->     
<div id="wapper">     
    <!-- 主要内容 -->     
    <div id="main-content">     
    </div>     
    <!-- 页脚 -->     
    <div id="footer">     
    </div>     
</div>
로그인 후 복사

CSS는 다음과 같습니다.

#wapper{     
    position: relative;   /*重要!保证footer是相对于wapper位置绝对*/     
    height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/     
    min-height: 100%  /* IE6不支持,IE6要单独配置*/     
}     
#footer{     
   position: absolute;  bottombottom: 0; /* 关键 */     
   left:0; /* IE下一定要记得 */     
   height: 60px;         /* footer的高度一定要是固定值*/     
}     
#main-content{     
   padding-bottom: 60px; /*重要!给footer预留的空间*/     
}
로그인 후 복사

이때 다른 브라우저에서는 정상적으로 표시될 수 있으나, IE 6에서는 별도로 처리해야 합니다.

<!--[if IE 6]->     
<style>     
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/     
</style>     
<![endif]-->
로그인 후 복사

읽어보시고 방법을 마스터하셨을 거라 믿습니다. 이런 경우, 더 많은 PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

관련 읽기:

모바일 웹 페이지 콘텐츠를 적응형으로 만드는 방법

테이블 테이블의 콘텐츠 오버플로를 처리하는 방법

HTML에서 iframe과 프레임의 차이점은 무엇인가요

위 내용은 페이지 하단에 바닥글 태그를 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿