>웹 프론트엔드 >HTML 튜토리얼 >바닥글이 항상 웹 페이지 하단에 표시되는 방식에 대한 자세한 설명

바닥글이 항상 웹 페이지 하단에 표시되는 방식에 대한 자세한 설명

高洛峰
高洛峰원래의
2017-03-20 13:38:082253검색

지난번에 웹페이지의 head와 tail을 별도의 파일로 분리하여 모든 웹페이지에서 공유해야 한다고 말씀드렸는데, 어떤 방법에서는 tail이 수정하기 더 편리합니다. 내용은 아래에 압축되어 있습니다. . 게다가, 일부 페이지의 내용이 작을 경우 꼬리가 아래쪽으로 눌려지지 않을 수 있으므로, 이번에는 꼬리를 아래쪽으로 유지하는 방법에 대해 알아보겠습니다. .

먼저 HTML 코드를 넣으세요:

<body>
<div class="header">头部</div>

<div class="content">
内容<br />
内容<br />
内容<br />
内容<br />

同上,以下省略N行。。。
</div>

<div class="footer">尾部</div>
</body>

방법 1: 사실 이 방법은 항상 브라우저 창 하단이 아니라 브라우저 창 하단에 있어야 합니다. 특정 웹페이지를 탐색할 때와 마찬가지로 로그인하지 않거나 등록하지 않은 경우에도 항상 아래에 프롬프트 정보 줄이 표시됩니다. 이는 아마도 맨 위로 돌아가기 버튼과 동일할 것입니다. .

마지막 사진은 이렇습니다

바닥글이 항상 웹 페이지 하단에 표시되는 방식에 대한 자세한 설명

CSS 코드:

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left: 0;bottom: 0;}

바닥글 고정 높이를 설정해야 합니다

방법 2: 바닥글 위치를 웹페이지 하단에 위치시키는 방법입니다. 바닥글 높이 고정 +절대 위치 지정

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left: 0;bottom: 0;}

콘텐츠 중간 부분에 패딩 추가 - 하단은 바닥글에 가려지지 않고 콘텐츠가 완전히 표시될 수 있도록 하며, 바닥글에는 고정 높이를 설정해야 합니다. 🎜>html 코드가 다릅니다:

Header

> ;

콘텐츠
콘텐츠

콘텐츠

콘텐츠

위와 동일하게 다음 N줄은 생략됩니다. . .







CSS 코드:
body{height: 100%;}
.wrap{min-height: 100%;}
.header{height: 100px;background-color: greenyellow;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}


위와 같이 콘텐츠에 padding-bottom 추가


첨부:

콘텐츠가 적을 때 :

콘텐츠가 많을 때 :

바닥글이 항상 웹 페이지 하단에 표시되는 방식에 대한 자세한 설명

위 내용은 바닥글이 항상 웹 페이지 하단에 표시되는 방식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.