CSS 바닥 글이 페이지 하단에 붙지 않습니다.

Question

CSS 레이아웃에서 끈끈한 바닥 글을 설정하는 데 어려움이 있습니다. 나는 http://www.cssstickyfooter.com/에서 아이디어를 얻으려고했지만 div의 내용이 충분히 높지 않은 경우에는 페이지 하단에 바닥 글이 남지 않습니다.

CSS 파일 :

* { 
margin:0; 
padding:0; 
} 

body { 
height:100%; 
margin:0px; 
padding:0px; 
} 

#wrap { 
min-height: 100%; 
} 

#container { 
overflow:auto; 
padding-bottom: 150px; 
text-align:left; 
width:800px; 
margin:auto; 
} 

#header { 
height:240px; 
margin-top:20px; 
} 

#navigation { 
float:left; 
width:800px; 
margin-top:20px; 
} 

#content-container { 
float:left; 
width: 800px; 
} 

#left { 
clear:left; 
float:left: 
width:480px; 
height: auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#right { 
float:right; 
width:275px; 
height:auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

#columns { 
width:800px; 
height:150px; 
margin:auto; 
} 

#colleft { 
float:left; 
width:400px; 
height:150px; 
} 

#colright { 
float:right; 
position:relative; 
width:260px; 
height:150px; 
} 

HTML 파일 :

<div id="wrap"> 

    <div id="container"> 

     <div id="header"></div> 

     <div id="navigation"> 

      <div id="lang"></div> 

     </div> 

     <div id="content-container"> 

      <div id="left"></div> 

      <div id="right"></div> 

     </div> 

    </div> 

    <div id="footer"> 

     <div id="columns"> 

      <div id="colleft"></div> 

      <div id="colright"></div> 

     </div> 
</div> 

Answer 1

나는 당신이 당신의 CSS에서

html { height: 100%; }

누락 생각합니다.

Answer 2

위치 사용을 고려 했습니까? 고정? 당신의 #footer가의 #footer이 랩의 외부해야한다는 CSS를 사용하여 #wrap 내부에 있기 때문에 최소 높이를 설정하는 것입니다 랩 같이

#footer { position: fixed; bottom: 0px; height:150px; } 

귀하의 예제가 작동하지 않는 이유는,이다 ~ 100 %, #footer가 음수 여백을 사용하여 위쪽으로 당겨집니다.

html 태그도 작동하려면 높이가 100 % 필요합니다.

그래서 #footer는 중첩 될 수 없으며 html에는 height : 100 %가 필요합니다. 여기

예 --- 도움 http://jsfiddle.net/CK6nt/

희망! 바닥 글 클래스에서 로리

Answer 3

: 그래서 클래스는 다음과 같이한다 position: relative;position:fixed에

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

변경 :

#footer { 
position: fixed; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

Answer 4

될 수있다 다른 접근 방식을 선택해야합니다. 바닥 글을 바닥에 붙이려면이 방법을 사용하십시오 Stick Footer to bottom with help of CSS3. 최신 브라우저에서만 작동합니다.) "우아한 저하"가 작동하는 다른 사람들에게도 컨텐츠는 계속 액세스 할 수 있습니다.