A 모든 페이지에 적용되지 않는 끈적한 바닥 글

현재 모든 종류의 끈적한 풋터가 필요한 웹 사이트에서 작업하고 있습니다.A 모든 페이지에 적용되지 않는 끈적한 바닥 글

그래서 홈 페이지를 참조하십시오 http://www.hostcule.org/newsite/

는 바닥에 바닥 글 스틱 자동으로하지만, 다른 페이지에 대한, 그것은하지 않습니다 같은 내가, CSS를 사용하여, 그것을 얻는 방법 http://www.hostcule.org/newsite/about-us

로 바닥에 붙어 있니? 바닥 글 DIV

#footer{ 
    clear:both; 
    float:left; 
    width:100%; 
    border-top:solid 1px #d1d0d0; 
    background-color:#f1efef; 
    margin-bottom:-10px; 
}

출처

2009-12-19 bear

내가 할 수 있었던 최선

현재 CSS는 화면 하단에 항상 꺼져 있도록 페이지 하단 OFF로 바닥 글을 밀어입니다. 다음은이를 수행하는 방법의 예입니다. stickyfooterfail 부서가 작동하지 않고 이유를 모르지만 position을 절대로 설정하면 bottom 속성이 올바르게 작동합니다.

<html> 
    <head> 
    <style type='text/css'> 
body { 
height: 100%; 
} 

#fullheight { 
background:#ff0; 
position: relative; 
min-height: 100%; 
} 
#stickyfooterfail { 
position: relative; 
bottom: 0px; 
} 

#stickyfooter { 
background: #f0f; 
} 
    </style> 
    </head> 
    <body> 
    <div id='fullheight'> 
     Some text<br> 
     Some text<br> 

     Some text<br> 
     <div id='stickyfooterfail'> 
     Should be at the bottom but isn't 
     </div> 
    </div> 
    <div id='stickyfooter'> 
     This is pushed off the bottom by the min-height attribute of #fullheight 
    </div> 
    </body> 
</html>

당신은 바닥 글 다음에 padding-bottom 설정할 수 일정한 절대 크기가 될 것입니다 알고있는 경우 - 같은 값으로 #stickyfooterfail의 bottom을 설정 한 후 (높이)가 높은 40px 인 경우 예를 들어 -40px 및 .

출처

2009-12-19 16:16:52 bearver

'# stickyfooterfail'은 상대적으로 배치 된 요소가 흐름의 원래 위치를 기준으로 배치되기 때문에 작동하지 않습니다. 따라서 'bottom : 0'을 설정하면 div 0 픽셀의 아래쪽을 원래 위치에서 위로 이동한다는 의미입니다. 나는. 전혀. – mercator

부모 요소에 상대적으로 배치되었다고 생각한 이후 규칙을 읽을 때 오해했습니다. 해명 해줘서 고마워. – bearver

A 모든 페이지에 적용되지 않는 끈적한 바닥 글

답변

관련 문제