CSS 포지셔닝 : 왼손 긴 메뉴가 꼬리말 뒤에 나타납니다

Question

고정되고 가운데에 배치 된 CSS 두 열 레이아웃이 있습니다. 탐색이 길고 내용이 짧은 페이지에서는 바닥 글이 탐색 아래로 위치가 변경되지 않습니다. 내용 영역의 최소 높이가 유지되며 탐색이 바닥 글 뒤에 있습니다. http://jsfiddle.net/fmJqw/1/

그러나 기본적으로, 나는 다음과 같은 구조가있다 :

<div id="wrapper"> 
    <div id="headerWrapper"></div> 
    <div id="bcrumbwrapper"></div> 
    <div id="midWrapper"> 
     <div id="navWrapper"></div> 
     <div id="contentWrapper"></div> 
    </div> 
    <div class="clear"></div> 
    <div id="footerWrapper"></div> 
</div> 

CSS의는 다음과 같다을 : 당신이 볼 수 있도록

것은 내가 바이올린 모든 것을 포함했다

#wrapper{ 
    padding:0px; 
    margin:0 auto; 
    width:1000px; 
    min-height:768px; 
} 
/*Header styles*/ 
#headerWrapper{ 
    padding:0px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:175px; 
    position:relative; 
} 

#bcrumbWrapper{ 
    padding:0px 0px 0px 20px; 
    margin:0px; 
    width:980px; 
    min-height:24px; 
    position:relative; 
} 

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
    min-height:513px; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    float:left; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

#footerWrapper{ 
    padding:5px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:40px; 
    position:relative; 
} 

어떤 도움을 주셔서 감사드립니다. 나는 머리카락을 찢어 버리고있다.

Answer 1

나는 여기 회원이 아닌 친구로부터 이에 대한 답을 얻었으므로 누구든지 나중에 참조 할 수 있도록 게시하려고합니다.

두 항목을 왼쪽으로 플로트하려했지만 div 중 하나에 절대 위치 지정을 사용했기 때문에 모든 것이 서로 경쟁하고있었습니다. 내용 래퍼에서 float을 제거하고 탐색 래퍼에서 절대 위치를 제거했습니다. 그런 다음 navwrapper가 페이지의 길이를 실행 한 것처럼 보이도록 포함 div의 배경색을 변경했습니다.

는 그래서되었다 :

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
    background-colour: #EBE2CA; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

html로 필요없이 자바 스크립트에 대한 변경이!

도움을 주셔서 감사합니다 :) 그리고이 대답에 대한 제 친구 크리스에게 감사드립니다.

Answer 2

콘텐츠를 보유하고있는 div의 높이를 기준으로 자바 스크립트를 사용하여 최소 높이를 항상 동적으로 변경할 수 있습니다. 이는 #contentWrapper라고 생각합니다.

CSS Sticky footer를 체크 아웃 할 수 있습니다 : http://www.cssstickyfooter.com/ 마크 업의 성격으로 인해 동작하게하려면 약간의 노력이 필요합니다.