아래쪽 중간에 꼬리표가있는 바닥 글

Question

콘텐츠에 텍스트가 얼마나 있더라도 바닥 글을 계속 유지하려고합니다. 내가 뭘 잘못 했니? 레이아웃은 다음과 같습니다

.top{ 
    width:500px; 
    height:100px; 
    background-color:black; 
} 

.content{ 
    width:500px; 
    min-height:100%; 
    position:relative; 
} 

.footer{ 
    width:500px; 
    height:100px; 
    background-color:blue; 
    position:absolute; 
    bottom:0; 
} 

<div class="top"></div> 
<div class="content"></div> 
<div class="footer"></div> 

http://jsfiddle.net/RDuWn/68/

감사합니다, 사이먼

Answer 1

당신이 위치를 사용할 필요가 있다고 생각 :

.footer{ 
    width:500px; 
    height:100px; 
    background-color:blue; 
    position:fixed 
    bottom:0; 
} 

DEMO

Answer 2

나는 것을이 같은 고정에서 position:absolute; bottom:0;을 삭제하십시오. 당신의 jsfiddle에Fiddle

Answer 3

, 나를 위해

.footer{ 
    width:500px; 
    height:100px; 
    background-color:blue; 
    position:fixed; 
    bottom:-1px; 
} 

작품 ..

합니다 ... fiddle

가이 브라우저에서 위치를 보장합니다 bottom:-1px; 참조 참조

Answer 4

코드가 작동하지만 바닥 글 클래스에서 높이 대신 최소 높이를 설정해야합니다. 콘텐츠 크기에 맞게 확장 할 수 있습니다. 그 변화

.footer{ 
    width:500px; 
    min-height:100px; 
    background-color:blue; 
    position:fixed; 
    bottom:-1px; 
} 

Here's how it will look

, 일부 자리의 콘텐츠는 바닥 글에 추가됩니다.

Answer 5

오버랩을 유발 한 것이 절대 위치 지정이었습니다. 절대적인 요소는 정상적인 흐름에서 제거되고 위치를 결정할 때 다른 요소에 의해 "무시"됩니다. css에서 위치를 지정하지 않으면 기본적으로 정적 위치 지정이되며 모든 요소가 "플로우"에 올바르게 포함됩니다. 여기

http://www.w3schools.com/css/css_positioning.asp

내가 사용하는 CSS의 :

.top{ 
    width:500px; 
    height:100px; 
    background-color:pink; 
} 

.content{ 
    width:500px; 
    min-height:100%; 
    background-color:blue; 
} 

.footer{ 
    width:500px; 
    height:100px; 
    background-color:black; 
    margin-bottom:0px; 
} 

[? 웹 페이지의 하단에 머물 바닥 글을 얻는 방법]의 (