바닥글이 항상 웹 페이지 하단에 표시되는 방식에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-20 13:38:082235검색
지난번에 웹페이지의 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으로 문의하세요.
이전 기사：HTML 메타 소개 6 - tr다음 기사：HTML 메타 소개 6 - tr