2011-10-07 7 views
8

컨테이너가없고 래퍼가 없습니다.하단에 강제로 바닥 글 유지?

는 단순히 그래서 같은 레이아웃을 가지고

...

<body> 

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

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

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

<div class="clear"></div> 

<div id="footer"> 
</div> 

내가 뭘 걸려 라하는 것은 확실히 바닥 글은 항상 내가 꽤까지 내려갑니다 내용이 있는지 여부를 화면 하단에 유지하는 것입니다 심지어는 화면 하단까지 계속 갈 수있는 충분한 콘텐츠가 아닙니다.

현재로서는 위의 두 가지 방법 중 하나를 사용할 수 있지만 둘 다 작동하고 싶습니다.

여기에 제가 설정 한 CSS가 있습니다.

html { 
height: 100%; 
} 

body { 
height: 100%; 
position: relative; 
} 

#footer { 
position: absolute; 
bottom: 0; 
} 

최소 높이 : 100 %; 콘텐츠가 진행될 때 CSS 문서 내의 HTML 요소로 이동하지만 내용이 없으면 화면 하단에 붙지 않습니다. 해상도에 관계없이.

나는 여러 번이 문제에 부딪 쳤고, 그것을 파악하는 방법을 전혀 알지 못했습니다. 그래서, 약간의 도움과 함께 많은 도움이 될 것입니다.

도움을 주신 모든 분들께 감사드립니다.

+1

'하지만 난 se' 당 그러나 결국, 어떤 내용이없는 경우 내용이 있어야하므로 무엇이 중요합니까? 아무도 당신의 꼬리말이 내용 바로 아래에서 아래쪽으로 걸리는 것을 걱정하지 않습니다. 나는 사람들이 그렇게 쓸모없는 효과를 얻기 위해 많은 시간을 낭비하는 이유를 알지 못합니다. – animuson

+1

@animuson : 바닥에 붙어 있으면 신경이 쓰입니다. 바닥 글이 내 디자인에 붙어 있지 않으면 우스꽝스럽게 보일 것입니다. 귀하의 의견을 주셔서 감사합니다. :) –

+0

가능한 [페이지 하단에 고정 바닥 글을 만드는 방법] (http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom) –

답변

8

사용이 동료, 그것은 정말 잘 설명하고 따라하기 쉬운 튜토리얼입니다 :

차이

GOOG le "sticky footer",이 기술이 왜 작동하는지 아래에 열거했습니다. 이 검색의 결과보다 낫습니다.

http://ryanfait.com/sticky-footer/ -이 기술은 비슷하지만 cleanStickyFooter가 훨씬 더 중요합니다. 바닥 글의 너비를 100 %로 만들려는 경우 에있는 기술은 제대로 재생되지 않습니다.

http://www.cssstickyfooter.com/ -이 기술은 많은 사람들 중에서 하나입니다. 내가 CSS 해킹 해킹으로 침략 적이라고 말한 것은이 기술입니다.

0

콘텐츠의 양에 관계없이 콘텐츠 하단에 또는 화면 하단에 바닥 글을 첨부 하시겠습니까?

첫 번째 경우에는 위치 지정이 번거롭지 않으므로 콘텐츠 다음에 페이지 흐름을 유지하십시오. 당신은 좀 더 명확하게해야 할 수도 있습니다

고정 :

두 번째 경우, 위치를 사용합니다. 무엇이 스크롤됩니까? 머리글? 왼쪽? 권리? 보행인? 전체 콘텐츠의 왼쪽 및 오른쪽 부분입니까? 왜 당신의 몸은 상대적입니까? 왜 당신은 "높이 : 100 %;" html로?

http://code.google.com/p/cleanstickyfooter/

최저 끈적 끈적한 바닥 글 이제까지 사이트에서 정말 정말 잘

견적 작업 (내가 completly 동의) :

+0

콘텐츠 하단과 콘텐츠 하단에 꼬리말을 붙이고 싶습니다. 화면 아래쪽으로 흐르는 콘텐츠가 충분하지 않은 경우 화면 하단에 붙어 있습니다. , 말이 돼? 나는 고정 된 위치를하고 싶지 않다. 왜냐하면 내가 가진 콘텐츠의 양에 관계없이 화면 하단에 붙을 것이고, 그 안에는 콘텐츠 div 중 하나에 적용된 여백 및/또는 패딩이 있어야하기 때문이다. 왼쪽과 오른쪽은 내용입니다. –

0

당신은 this Artice by RyanFait

크로스 브라우저에 지정된 레이아웃을 살펴 수 있고, 항상 작동합니다 :)

+0

Google 위 ... http://ryanfait.com/sticky-footer/ -이 기법은 비슷하지만 cleanStickyFooter는 훨씬 더 많은 작업을 수행합니다. 바닥 글의 너비를 100 %로 만들려는 경우 여기에있는 기술은 제대로 작동하지 않습니다. –