2010-02-15 7 views
1

페이지 위쪽으로 나타나는 노란색 바닥 글 블록은 일반적으로 바닥 글처럼 내용의 맨 아래로 흐르게됩니다.바닥 글이 페이지 하단으로 흐르지 않음

#footer { 
    background-color: #2F3B47; 
    padding: 20px; 
    height: 180px; 
    float: none; 
    clear: both; 
} 

내가 그것을 콘텐츠 블록의 바닥에 흐르도록 컨텐츠 사업부의을 너비에 관계없이 "끈적 끈적한 바닥 글"처럼 작동하는 솔루션이 필요합니다 : 여기

은의 #footer에 대한 CSS입니다 . 어떤 조언이나 도움을 주셔서 감사합니다!

답변

2

이와같이?

position: fixed; 
    left: 0; 
    bottom: 0; 
0

모든 콘텐츠를 절대적으로 배치했기 때문에 하단으로 이동하지 않습니다. 스크립팅을 통해 높이를 해킹 한 것 같습니다. div,하지만 #wrapper에 대해서는 수행하지 않았습니다. 따라서 #wrapper의 계산 된 높이가 0이고, 흐름에서 #footer의 위치를 ​​계산하는 데 사용됩니다.

당신이 당신을 어떻게 재 작성해야하는지, 즉. 위치 지정 대신에 수레를 사용하거나 다른 여러 포스터 제안 또는 이동 바닥 글로 position: fixed을 사용하여 에 동일한 스크립트를 적용하여 수행 할 수있는 푸터를 올바르게 배치하는 방법을 알아야합니다. 래퍼 및 절대 위치 지정 사용.

개인적으로 나는 당신이 그것을 어떻게하는지 재 작업 할 것입니다. ABS의 위치는 그 용도가 있지만 거의 당신은 두 단계에있는 구조를 가져야 한마디로 http://www.cssstickyfooter.com/

에 모습을 제공한다

0

:-) 이러한 용도에 포함 된 전체 페이지 출력 레이아웃 (내용입니다 및 바닥 글).

<div id="wrap"> 

    <div id="main" class="clearfix"> 

    </div> 

</div> 

<div id="footer"> 

</div> 

바닥 글 CSS는 같습니다

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

전체 코드는 매우 작고 웹 사이트에 있습니다.

1

래퍼에 연관된 높이가 없으므로 내용이 div를 채우더라도 이 (가) div가되지 않습니다.

하나의 방법으로 최소 높이를 설정하면 바닥 글이 아래로 밀려납니다.

.wrapper { 
min-height:900px; 
} 

그러나 콘텐츠가 최소 높이 이상으로 커질수록 문제가 지속됩니다. 한 가지 대답은 모든 품목이 DIV 내에 있는지 확인하는 것입니다. 따라서 .swf가 500x500 인 경우이 방법으로 500x500 div 안에 중첩 시키십시오. 이렇게하면 래퍼의 내용에 따라 내용 하단에서 일정한 거리를 유지하게됩니다.

0

그것은 마법처럼 일 0

link

또한 설정 바닥 글 "마진 - 하단에"@ "펠리페 Schenone".

관련 문제