요소를 사용해야 합니다. HTML 바닥글의 표준 속성:
class, contenteditable, contextmenu, dir, draggable, id, irrelevant, # 🎜🎜#lang, ref, Registrationmark, tabindex, template, title
html5 구문 구조 - TOP
1 Grammar
<</span>footer>
PHP中文网<</span>br />
学习CSS，找DIV+CSS资源上PHP中文网!
</</span>footer>
로그인 후 복사
2.예 footer 요소 태그에 id
<</span>footer id=”abc”>
PHP中文网<</span>br />
学习CSS，找DIV+CSS资源上PHP中文网!
</</span>footer>
로그인 후 복사
3을 추가합니다. class
<</span>footer class=”yanshi”>
PHP中文网<</span>br />
学习CSS，找DIV+CSS资源上PHP中文网!
</</span>footer>
로그인 후 복사
4를 추가합니다. Knowledge 확장
html5 개발에서 footer 태그를 사용할 때 , 그냥 일반 div 태그로 취급하지만 일반적으로 웹사이트의 하단 레이아웃에 사용됩니다. 일반적으로 웹페이지에는 하단 영역이 하나만 있으므로 바닥글은 한 번만 사용하는 것이 가장 좋습니다.
참고: HTML5의 새로운 기능이며 IE8 이하와 호환되지 않으므로 주의해서 사용하세요.
인터넷에서 페이지 하단에 간단한 구현 방법을 보고 이제 공유해봅니다
Demand: 가끔 페이지 내용이 짧을 때, 열 수 없습니다. 브라우저 높이가 높지만 바닥글이 창의 가장 낮은 끝에 있도록 하고 싶습니다.
아이디어: 바닥글의 상위 레이어의 최소 높이는 100%입니다. 바닥글의 높이는 상위 레이어의 위치를 기준으로 완전히 아래쪽(하단: 0)으로 설정됩니다. 상위 레이어에 예약되어 있습니다.
html 코드:
XML/HTML 코드 콘텐츠를 클립보드에 복사
<!-- 父层 -->
<div id="wapper">
<!-- 主要内容 -->
<div id="main-content">
</div>
<!-- 页脚 -->
<div id="footer">
</div>
</div>로그인 후 복사
CSS는 다음과 같습니다.
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에서는 별도로 처리해야 합니다:
CSS 코드 내용을 클립보드에 복사 클립보드# 🎜🎜#
<!--[if IE 6]->
<style>
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/
</style>
<![endif]-->로그인 후 복사
【관련 추천】
HTML IMG 태그의 속성은 무엇인가요? IMG 태그 사용법 이해하기
HTML5에서 웹이란 무엇인가요? 웹 스토리지의 요소는 무엇인가요?
위 내용은 HTML5에서 바닥글 태그를 사용하는 방법을 알고 있나요? , HTML5의 바닥글 태그는 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
