페이지 하단에 HTML 바닥글을 구현하는 간단한 방법

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

아이디어: 바닥글 상위 레이어의 최소 높이는 100%이고, 바닥글은 위치를 기준으로 절대 바닥(하단: 0)으로 설정됩니다. 상위 레이어의 경우 바닥글의 높이는 상위 레이어에 예약되어 있어야 합니다.

html 코드:

<!-- 父层 -->     
<p id="wapper">     
    <!-- 主要内容 -->     
    <p id="main-content">     
    </p>     
    <!-- 页脚 -->     
    <p id="footer">     
    </p>     
</p>

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]-->

페이지 하단에 html 바닥글을 배치하는 위의 간단한 구현 방법은 편집자가 공유하는 모든 내용이기를 바랍니다. 도움이 될 수 있습니다. 모두를 위한 참고자료이며, 모두가 PHP 중국어 웹사이트를 지지해 주기를 바랍니다.

페이지 하단에 HTML 바닥글을 배치하는 간단한 구현 방법에 대한 자세한 관련 기사는 PHP 중국어 웹사이트를 참고하세요!