높이와 최소 높이가있는 왼쪽 메뉴

Question

양해 해 주셔서 감사합니다. 높이와 최소 높이가 100 % 인 왼쪽 메뉴를 만들 필요가 있습니다. 예를 들면 다음과 같습니다. 웹 사이트가 나던 많은 콘텐츠가있는 경우 웹 사이트 콘텐츠를 많이 가지고 있다면

, 왼쪽 메뉴 하단 에 가야한다, 왼쪽 메뉴는 하단으로 이동해야하지만, 스크롤와 ...

왼쪽과 오른쪽 div를 항상해야 100 %

Image Example http://www.diegomenezes.com/stack.jpg

그것은 OU가 JSFiddle 링크를 볼 수있는 HTML5

다음

를 사용할 수 http://jsfiddle.net/6gSYn/

여기 내 코드! 여기

<div id="container"> 
    <div id="top"><h1>TESTE</h1></div> 
    <div id="content"> 
     <div id="left"> 
     <ul class="lista"> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li>     
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
     </ul> 
     </div> 
     <div id="right"> 
     <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>   

      <div id="footer"> 
      <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p> 
      </div> 
    </div> 
    </div>  

</div> 

CSS를

@charset "utf-8"; 
/* CSS Document */ 

* { 
margin: 0px; 
padding: 0px; 
} 
html { 
    height: 100%; 
} 

body { 
background: darkgrey; 
height: 100%; 

} 

#container {  
height: 100%; 
position: relative; 
} 

#top { 
height: 100px; 
width: 100%; 
background-color: black; 
color: white; 
float:left; 
} 

#content { 
background: darkgrey; 
width:100%; 
min-height: 100%; 
height:100%; 
} 

#content ul.lista { 
width: 250px; 
display: inline-block; 
vertical-align: top; 
background: lightgrey; 
color: red; 
bottom: 0; 
} 


#right { 
width: 1000px; 
color: blue; 
display: inline-block; 
padding: 10px; 
min-height: 400px; 
} 


#footer { 
color: black; 
height: 50px; 
text-align: center; 
width: 100%; 
} 

Answer 1

이 시도하고 당신을 위해 일한으로 말할 여부 jsfiddle
CSS :

#right { 
    overflow-y: scroll; 
} 

td { 
    vertical-align:top; 
}