집 > 기사 > 웹 프론트엔드 > 페이지 하단에 바닥글 태그를 배치하는 방법

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

php中世界最好的语言원래의: 2018-01-23 10:41:345286검색

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

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

아이디어: 바닥글 상위 레이어의 최소 높이는 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 중국어 웹사이트의 다른 관련 기사도 주목해주세요!