2 열 메인 컨텐츠 레이아웃이있는 끈적한 바닥 글

안녕하세요, 모두 페이지 바닥에 붙이는 데 문제가 있습니다. 모든 일반적인 조언을 따라 왔지만 왼쪽의 열은 container div의 범위를 넘어 확장되어 페이지의 맨 아래에서 바닥 글을 푸시합니다. jQuery를 통해 접을 수있는 패널을 꽤 많이 가지고 있기 때문에 상당히 복잡한 레이아웃을 가지고 있지만 기본 구조를 제공 할 것입니다.2 열 메인 컨텐츠 레이아웃이있는 끈적한 바닥 글

기본 HTML :

<html> 
    <head></head> 
    <body> 
     <div id="container"> 
     <div id="content_header"> <!-- collapsible top panel --> 
      </div> 

     <div id="show_content_header"> <!-- tab shown to expand top panel when minimized--> 
     </div> 

     <div id="content_left_panel"> <!-- collapsible left panel --> 
     </div> 

     <div id="show_left_panel"> <!-- tab shown to expand left panel when minimized --> 
     </div> 

     <div id="main_content"> 
     </div> 
     </div> 

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

그리고 CSS : 내 바닥 글 #으로 할 때 90 시간 %,하지만 빨리 페이지 하단에 남아 말했듯이

body 
    { height: 100%; 
     margin:0; 
     padding:0;} 

    html, body, #container { height: 100%; } 
    body 

    #container { height: auto; min-height: 100%; } 

    #content_header 
    { position:fixed; 
     width:100%; 
     left:0; 
     height:200px; 
     background:url(../images/image.png) repeat-x; 
     border:1px solid #000; 
     z-index: 100; } 

    #show_content_header 
    { position:fixed; 
     z-index:2; 
     display:none; 
     width:100%; 
     height:40px; 
     top:40px; 
     left:0; } 

    #content_left_panel 
    { position: absolute; 
     top: 235px; 
     left: 0px; 
     width: 200px; /*Width of frame div*/ 
     height: auto; /*usually 100%*/ 
     overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
     z-index:0;} 

    #show_content_left_panel 
    { position:fixed; 
     left:0; 
     float:left; 
     padding-top:5px; 
     display:none; 
     width:0px; 
     height:30px; 
     cursor:pointer; 
     top:90px;} 

    #main_content 
    { position: relative; 
     margin-left:210px; 
     margin-top: 235px; 
     margin-right:10px; 
     margin-bottom: 100px; 
     height: 100%; 
     overflow: hidden; 
     z-index:0;} 

#footer { 
    position: relative; 
    z-index: 100; 
    height: 100px; 
    margin-top: -100px; 
    width:100%; 
    background:url(../images/image.png) repeat-x; 
    clear: both;}

content_left_panel이 주 콘텐츠의 높이를 초과하면 바닥 글은 페이지 하단에 더 이상 남지 않으며 컨테이너 div의 맨 아래에 뿌리가 있습니다. #content_left_panel이 컨테이너에서 빠져 나올 때 혼란 스럽습니다. 플로트 인 것과 관련이 있다고 추측합니다.

도움을 주시면 감사하겠습니다.

건배

출처

2011-10-14 Ally

나는 우리가 문제를 해결하기 위해 행동을 취할 필요가 있다고 생각한다. 그가 발행한다. 이 코드를 공개하고 공개적으로 볼 수 있습니까? – Alex

불행히도,하지만 # content_left_panel의 높이가 #main_content 높이를 넘자 마자 말했듯이 깨집니다. 컨테이너 div 높이는 #main_content에 의해 결정된 것으로 보이며 #content_left_panel에주의를 기울이지 않습니다 ... – Ally

난 정말 당신이 원하는 레이아웃의 종류를 이해하지 않지만 #content_left_panel 그렇게 position:absolute; 규칙을 가지고

그것은 정상적인 흐름에서 제거 완전히

(HTTP : //www.w3.org/TR/CSS2/visuren.html#absolute-positioning)

출처

2011-10-14 12:18:13 MatTheCat

예, 문제가 발생했습니다. 스틱 푸터 웹을 사용하여 모든 페이지 컨테이너를 재구성했습니다. http : // www. cssstickyfooter.com/ – Ally

2 열 메인 컨텐츠 레이아웃이있는 끈적한 바닥 글

답변

관련 문제