집 > 기사 > 웹 프론트엔드 > CSS로 바닥글을 하단에 고정하는 방법

CSS로 바닥글을 하단에 고정하는 방법

王林원래의: 2020-11-23 10:04:583306검색

CSS를 사용하여 하단 바닥글을 수정하는 방법: 먼저 페이지의 HTML, 본문 및 컨테이너가 [높이:100%]를 충족하는지 확인한 다음 상대 위치 지정[하단:0]을 사용하여 하단 바닥글을 수정합니다. 페이지의.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

원리 분석:

페이지 내 html, body, 컨테이너는 height:100%를 충족해야 전체 화면(페이지)을 차지할 수 있으며, 바닥글은 페이지 하단에 고정된 상대 위치 지정인 0을 사용합니다. 페이지의 기본 페이지 컨테이너는 바닥글 높이보다 크거나 같은 패딩 바닥을 설정해야 합니다. 바닥글이 항상 페이지 하단에 고정되도록 페이지 컨테이너에 바닥글을 추가합니다.

구현:

HTML

<div id="container">
    <div id="header">Header Section</div>
    <div id="page" class="clearfix">
        <div id="left">Left Sidebar</div>
        <div id="content">Main content</div>
        <div id="right">Right sidebar</div>
    </div>
    <div id="footer">Footer Section</div>
</div>

여기서 주의할 점은 바닥글 컨테이너가 컨테이너 컨테이너에 포함된다는 것입니다.

CSS

html,body {
  margin: 0;
  padding:0;
  height: 100%;
}
#container {
  min-height:100%;
  height: auto !important;
  height: 100%; /*IE6不识别min-height*/
  position: relative;
}
#header {
    background: #ff0;
    padding: 10px;
}
#page {
    width: 960px;
    margin: 0 auto;
    padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;/*脚部的高度*/
    background: #6cf;
    clear:both;
}
/*=======主体内容部分省略=======*/

CSS 코드를 보면 페이지 본문 페이지에 패딩 하단 세트가 있고 바닥글 높이와 일치하는 것을 볼 수 있습니다. 여기에서는 padding-bottom 대신 Margin-bottom을 사용할 수 없습니다.

이 솔루션에는 단점이 있습니다. 바닥글은 고정된 높이를 가져야 하며 페이지는 이 높이보다 크거나 같은 패딩 바닥을 설정해야 합니다. 바닥글의 높이가 고정되어 있지 않거나 바닥글을 조정해야 하는 경우 이 솔루션은 적합하지 않습니다.

CSS로 바닥글을 하단에 고정하는 방법

관련 기사