이번에는 바닥글 태그를 페이지 하단에 넣는 방법과 페이지 하단에 바닥글 태그를 넣는 주의사항에 대해 알려드리겠습니다.
요구 사항: 페이지 내용이 짧고 브라우저 높이를 지원할 수 없지만 바닥글을 창의 가장 낮은 끝에 배치하려는 경우가 있습니다.
아이디어: 바닥글 상위 레이어의 최소 높이는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!