페이지 하단에 CSS의 메이크업 바닥 글을 수정하는 방법

(작품은, 가능한, 첫 번째 방법을 시도이 문제가 발생이 여기에 게시)

 

CSS

달성하기 위해 웹 페이지를 개발하는 동안, 당신은 이러한 시나리오가 발생할 수 있습니다 페이지 하단에 고정 된 바닥 글 바닥 글, 페이지의 몸이 화면 높이를 채울 수없는 경우에있는 바닥 글  화면의 하단을  , 경우 화면을 넘어 페이지의 본문 높이, 바닥 글에 항상  페이지 하단  .

아래 장면 회로도,

 

 

 

 

어떻게 바닥 글은 항상 페이지 그것의 하단에 고정되어 있습니까?

일반적으로, 하나의 특정 기술 및 구조를 HTML 만 CSS를 사용하고,이 목적을 달성하기 위해 두 가지 방법이 있는데, 다른 JS 코드는 운영 DOM 소자를 사용하는 것이다.

이 문서에서는이 목적을 달성하기 위해 CSS 기술을 사용하는 세 가지 방법을 설명합니다.

첫 번째 방법

이 방법의 첫 번째 원칙이다

페이지  html ,  body ,  container 만족해야  화면 (페이지)를 기입 할 수 있도록,  상대 측위 사용  의 페이지의 본문 페이지의 하단에 고정을,  용기를 쉽게 설정되어야거나 같음 큰  높이  의 목적을 위해,  계산 된 높이  용기는, 그래서 그것은 항상 페이지의 하단에 고정됩니다.height:100% footer bottom:0 page footer padding-bottom footer page footer 

우리는 첫째, 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>

여기서주의해야 할 점은 있다는 것입니다  footer 컨테이너는  container 컨테이너 포함.

그런 다음, 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 코드에서, 우리는 페이지의 몸이 볼  page 최대 설정  하고  높이가 동일합니다. 그것은 여기에 사용할 수 없습니다  대신  .padding-bottom footer margin-bottom padding-bottom 

jsfiddle 인스턴스를 완료  여기  .

이 용액의 단점을 갖는다 :  footer 높이를 수정해야  page 이상의 세트의 높이를 동일하게한다  . 경우  높이를 고정, 또는 적응 바닥 글이 아닌 당신을 위해 다음이 프로그램을 수행 할 필요가 없습니다.padding-bottom footer 

두 번째 방법

두 번째 방법은 원칙이다 :

footer 컨테이너 및  container 쉬운 더 이상 관계를 포함, 두 사람은 같은 수준 없습니다. 하려면  html ,  body ,  container 용기의 높이가 100 %로 설정되는  container 부가 다시 다음 페이지 전체가 가득 점유하고있다  footer 용기,  footer 페이지의 하단을 초과해야하며, 페이지 스크롤 바를 표시한다. 그래서, 우리는 할  footer 의 음의 값을 추가  오프 스크린에서 가져온 용기를. 음의 값  동일한 높이.margin-top footer margin-top footer 

우리는 첫째, 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>
<div id="footer">Footer section</div>

여기가 볼 수있는,  footer 컨테이너 및  container 컨테이너는 형제입니다.

CSS 코드를 봐

html,
body {
 height: 100%;
 margin: 0;
 padding: 0;
}
#container {
 min-height: 100%;
 height: auto !important;
 height: 100%;
}
#page {
 padding-bottom: 60px; /*高度等于footer的高度*/
}
#footer {
 position: relative;
 margin-top: -60px; /*等于footer的高度*/
 height: 60px;
 clear:both;
 background: #c6f;
}
/*==========其他div省略==========*/

우리는 줄  footer 컨테이너가 설정 한  음의 값  의  의를위한 목적으로  오프 스크린에서 가져온 용기를. 받는 사람  추가 할 컨테이너  받는 목적을 컨테이너의 높이를 계산  스크롤 막대 동작을 표시하는 페이지가 정확 때 있도록 크기.margin-top footer page padding-bottom footer page 

jsfiddle 인스턴스를 완료  여기  .

첫 번째 방법으로,이 방식의 단점은 동일하다.

세 번째 방법

방법의 세 번째 원칙이다

사용하여 A 어떤 콘텐츠  push 에 컨테이너를  footer 컨테이너 페이지 맨 밀어 넣지,하지만에도  container 음의 값을 설정  하는 것이,  용기와  , 용기의 높이가 동일하다. 실제로, 두 번째 방법으로,이 방법은 비교적 가깝다. 그러나 그것은 의미없는 이상입니다  선박.margin-bottom margin-bottom footerpush push 

우리는 관련 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 Content</div>
 </div>
 <div class="push"><!-- not put anything here --></div>
</div>
<div id="footer">Footer Section</div>

CSS 코드

html,
body{
 height: 100%;
 margin:0;
 padding:0;
}
#container {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
}
.push,
#footer {
 height: 60px;
 clear:both;
}
/*==========其他div效果省略==========*/

jsfiddle 인스턴스를 완료  여기  .

단점 : 위의 두 가지 방법에 비해, 다중의 이용  컨테이너,이 방법은 동일한 제한  높이의 일부는 매우 적응의 효과를 얻을 수 없다.div.push footer 

개요

세 가지 방법은 특정 된 HTML 및 CSS 달성하기위한 결합 구조를 사용하여 이전에 설명된다. 그것은 그들이 최신 브라우저의 새 버전을 잘 수행 할 수있는, 경량입니다. 그러나 CSS를 요구 사용해야합니다 이런 식으로  footer 페이지 바닥 글 바닥 글의 높이가 항상 목적의 하단에 고정되어 도달하는 손과 발에 용기의 본체이기 때문에 높이를 고정합니다.

또한 제외 CSS의 방식으로는이  빠르고 거친 치열한  직접적 DOM 요소를 조작하는 코드를 JS, 방법. 이 방법은 HTML로 제한하고, 모든 브라우저와 호환 이론되지 않습니다. 직접 사용 JS는 DOM은 매우이다 조작 할 수 있기 때문에이 방법은 개인적으로, 권장하지 않습니다  무거운  행동은 HTML, CSS 성능에 도움이되지이며, 페이지가 다시 그려되기 때문에 페이지 크기 조정, 종종 어떤 깜박임 또는 카드를 일으킬 때 발생 데이턴.

참조 목록

• 스티커 바닥 글 코드를 사용하는 방법 (페이지 하단에 가까운 바닥 글 방법을 허용)
• 바닥 글 탐색
• 페이지의 하단에 바닥 글 스틱을 확인
• 페이지 하단의 바닥 글을 수정하는 방법

종료. 모든 권리 보유  .@gejiawen 

달성하기 위해 웹 페이지를 개발하는 동안, 당신은 이러한 시나리오가 발생할 수 있습니다 페이지 하단에 고정 된 바닥 글 바닥 글, 페이지의 몸이 화면 높이를 채울 수없는 경우에있는 바닥 글  화면의 하단을  , 경우 화면을 넘어 페이지의 본문 높이, 바닥 글은 항상에 위치  페이지의 맨 아래

 

HTTP : //ju.outofmemory.cn/entry/194786에서 이동