> 웹 프론트엔드 > HTML 튜토리얼 > 페이지 하단에 HTML 바닥글을 구현하는 간단한 방법

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

高洛峰
풀어 주다: 2017-02-22 11:18:43
원래의
1622명이 탐색했습니다.

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

아이디어: 바닥글 상위 레이어의 최소 높이는 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 중국어 웹사이트를 참고하세요!

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