하단으로 바닥 글을 누르는 법 - 기타 - 2019

Anonim

레이아웃 된 페이지의 맨 아래 가로 블록은 종종 바닥 글이라고합니다. 페이지의 다른 블록과 마찬가지로 디자인 요소가 배치되지만이 특정 블록의 위치를 ​​지정하는 다른 요소와 달리 특정 문제가 종종 발생합니다. 그것들은 다른 브라우저가 CSS 언어의 표준을 여러 가지 방식으로 이해하고 있기 때문에 바닥 글이 브라우저 창의 아래쪽 가장자리에 오도록하기가 어렵 기 때문입니다. 아래는이 문제에 대한 해결책 중 하나입니다.

너는 필요할거야.

  • 기본 CSS 및 HTML 지식

지시 사항

1

페이지 소스 코드의 맨 처음 줄에 XHTML 1.0 Transitional 사양의 표시를 넣습니다.

2

문서 본문 내부 (태그 사이)에 페이지 구조의 주요 블록을 배치합니다. 주 콘텐츠가 배치 될 블록은 두 개의 중첩 된 레이어로 구성되어야합니다. 예를 들어, 외부 하나는 식별자 OuterDiv, 내부 하나는 - InnerDiv :


여기에 페이지의 주요 내용이 있습니다.


그 뒤에 식별자가있는 바닥 글 블록을 배치합니다 (예 : FooterDiv :


바닥 글 페이지.

3

HTML 코드의 헤더 부분 (태그 사이)에 css-styles에 대한 설명이있는 외부 파일에 대한 링크를 넣습니다.
@import "footerStyle.css";

4

샘플 페이지의 전체 코드를 HTML 확장자로 파일에 저장하십시오. 다음과 같이 보일 수 있습니다.
프레스 풋터
@import "footerStyle.css";


여기에 페이지의 주요 내용이 있습니다.


바닥 글 페이지.

5

스타일 파일 - css 확장자와 HTML 코드 (footerStyle.css)에서 지정한 이름으로 저장해야하는 일반 텍스트 파일을 만듭니다. 페이지에 사용 된 블록에 대해이 파일에 다음 스타일 설명을 작성하십시오.
* {margin : 0; 패딩 : 0}
html, body {height : 100 %;}
몸체 {
위치 : 상대적;
color : # 222222;
}
#OuterDiv {
margin : 0;
최소 높이 : 100 %;
배경 : #aaaaaa;
color : # 222222;
}
* html #OuterDiv {height : 100 %;}
#FooterDiv {
위치 : 상대적;
명확 : 둘 다;
margin-top : -60px;
높이 : 60px;
너비 : 100 %;
background-color : DarkBlue;
텍스트 정렬 : 가운데;
color : #eeeeff;
}
.InnerDiv {
너비 : 100 %;
float : 왼쪽;
}