CSS 고정 바닥 글 - 페이지에서 div를 절대적으로 배치 한 경우 어떻게해야합니까?

나는 전에 나를 위해 일했다,이 솔루션을 사용하고 있습니다 :CSS 고정 바닥 글 - 페이지에서 div를 절대적으로 배치 한 경우 어떻게해야합니까?

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

나는 현재 사이트에서 일하고 있어요, 그리고 제대로 동작하지 않습니다. 페이지의 일부 div에서 절대 위치를 사용하고 있기 때문입니다. 페이지 하단에 붙어 다니는 대신 머리글 아래에 절대적으로 위치한 div 바로 위에 꼬리말이 나타납니다. 이 상황에서 끈적 인 바닥 글을 어떻게 작동시킬 수 있습니까?

<div id="wrap"> 
     <div id="container"> 

      <div id="myDiv"> 
       ...content... 
       ... this div is absolutely positioned 
      </div><!-- END aboutText --> 

     </div><!-- END container --> 
    <div class="push"></div> 

</div><!-- END wrap --> 
<div id="footer"> 
    ...footer content 
</div>

사실 지금 일하고있어. 왜 그런지 - 그 CSS 신비 중 하나. 여기에 관련된 질문이 있습니다 - 어떻게 브라우저의 크기를 조정할 때 (더 작게 만들 때), 바닥 글이 위로 이동하고 내용을 덮지 않도록 브라우저 높이를 어떻게 설정합니까?

편집 - 여기 CSS가 있습니다. 바닥 글은 하단에 잘 붙지 만 브라우저 창이 작 으면 페이지의 내용 div가 표시됩니다.

html, body { 
    height: 100%; 
} 


#wrap{ 
    width:950px; 
    margin: 0 auto -80px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 

} 


.push { 
    height: 80px; 

} 

#footer{ 
    height: 80px; 
    background-image:url(../images/img.jpg); 

} 

#container{ 
    position:relative; 
} 



#someDivWithinTheContainer{ 
    position:absolute; 
    left:230px; 
    top:300px; 
}

출처

2009-09-21 sol

이것은 CSS 질문입니다. 관련 CSS를 게시 할 수 있습니까? –

아래에서했던 것처럼 '답변'에 추가 세부 사항을 게시하는 대신 관련 세부 사항으로 질문을 편집하십시오. –

정답 위치 6으로 그 속성을 지원하지 않는다는 것을 제외하고는, 고정되어있다.

출처

2009-09-21 01:28:33

여기 바닥 글을 붙이기 위해 사용하는 방법은 다음과 같습니다. 이 방법을 사용하면 창 크기가 아무리 작아도 내용이 겹치지 않습니다. 편집 할 경우 #body div의 패딩 하단이 #footer div의 높이보다 큰지 확인하십시오. 이것이 중복을 방지합니다. 절대적으로 위치하는 콘텐츠가있는 페이지가 없으므로 그 페이지가 어떻게 작동하는지 잘 모릅니다. 떠 다니는 내용의 경우 자연스럽게 그 뒤에 클리어링 블록이 있어야합니다. 그렇지 않으면 #body div가 축소됩니다.

CSS :

html, body {margin:0;padding:0;height:100%;} 
#container {min-height:100%;position:relative;} 
#body {padding:10px;padding-bottom:2em;zoom:1;} 
#footer {position:absolute;bottom:0;width:100%;height:1em;}

HTML :

<body> 
    <div id="container"> 
    <div id="body"> 
     (body contents) 
    </div><!-- #body --> 
    <div id="footer"> 
     <p>(footer text)</p> 
    </div><!-- #footer --> 
    </div><!-- #container --> 
</body>

그리고 IE6를 해결하기 위해, 나는 조건부 주석 추가 :

<!--[if lt IE 7]> 
<style type="text/css"> 
#container {height:100%;} 
</style> 
<![endif]-->

을 너무으로하는 doctype 선언을하는 것도 중요합니다 IE는 쿼크 모드가 아닌 표준 모드입니다.

출처

2009-09-30 22:06:49 Martha

페이지 본문 내에서 스크롤이 발생해도 무시하고 창 프레임을 기준으로 요소 위치를 고정합니다.

사람들은 비슷하지만 다르기 때문에 때로는 절대를 사용합니다.

"절대적인"것에 대한 가장 큰 오해 중 하나는 페이지 내에서 절대적으로 위치한다는 것입니다 (적어도 내가 최근에 인터뷰 한 모든 사람들을 기반으로 함). 그렇지 않습니다. Absolute는 요소가 가장 인접한 "배치 된"요소, 즉 "position: static"(기본값)을 포함하지 않는 요소 내에 절대적으로 배치되었음을 의미합니다. 당신이 다른 것을 배치하지 않는다면, 그것은 당신이 기대하는 것처럼 몸입니다. 일단 position을 사용하기 시작하면, 상대적 요소가 변경됩니다.

나는 이것이 당신이 처한 것으로 의심됩니다.

출처

2009-10-05 14:33:39 ndp

CSS 고정 바닥 글 - 페이지에서 div를 절대적으로 배치 한 경우 어떻게해야합니까?

답변

관련 문제