사이드 바에 아래쪽으로 채우기

Question

템플릿을 만드는 방법을 연습했습니다. 내 첫 번째 문제는 내용이 전체 화면을 채우기에 충분히 길지 않은 경우 화면 아래쪽에 바닥 글을 붙이는 방법입니다. 이 튜토리얼을 사용하여 해결되었습니다. http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

다른 문제는 사이드 바를 바닥 글까지 줄이는 방법이었습니다. 여기

<div id="wrapper"> 
    <div id="header"> 
     header here 
    </div> 
    <div id="container"> 
     <div id="sidebar"> 
      sidebar here 
     </div> 
     <div id="content"> 
      content here 
     </div> 
    </div> 
    <div class="cls"></div> 
    <div id="footer"> 
     footer here 
    </div> 
</div> 

는 CSS입니다 : 여기

는 HTML의

body{ 
    padding: 0; 
    margin: 0; 
} 
.cls{ 
    clear:both; 
} 
#wrapper{ 
    min-height: 100%; 
    position: relative; 
} 
#header{ 
    background-color: #DDDDDD; 
    height: 60px; 
} 
#container{ 
    padding-bottom: 60px; 
    width: 100%; 
} 
#sidebar{ 
    background-color: #87CEFA; 
    width: 220px; 
    float: left; 
    padding-right: 20px; 
} 
#content{ 
    width: 75%; 
    float:right; 
} 
#footer{ 
    background-color: #CCCCCC; 
    bottom: 0; 
    position: absolute; 
    width: 100%; 
    height: 60px; 
} 

이미지 링크 열기, 왼쪽에있는 사람은 나는 내가 원하는 .... 지금 무엇을 가지고 결과는 오른쪽에있는 것입니다. http://www.4shared.com/photo/CoXrUWP2/template.html

Answer 1

이것을 달성하는 주요 방법은 세 가지가 있습니다.

하나는 표식 레이아웃을 사용하고 있습니다.

두 번째는 #container 요소에 배경을 설정하는 것입니다. Photoshop에서 220px 세로 막대를 사용하여 이미지를 만들고 그 조각을 사용하여 #container 요소의 전체 높이를 확장하는 사이드 바 모양을 제공하십시오.

세 번째

는 컨테이너의 높이로 #sidebar 요소의 크기를 조정 JQuery와 사용하는 것입니다,이 같은 그것을 할 것입니다 :

$("#sidebar").height($("#container").height()); 

Answer 2

#sidebar{ 
    background-color: #87CEFA; 
    width: 220px; 

    min-height:600px; 
    height:auto !important; 
    height:600px; 

    float: left; 
    padding-right: 20px; 
} 

이 시도하고 당신을 위해 일했다면 이야기 ?