고정 크기 왼쪽 열 및 유동 오른쪽 열 모두 100 % 높이

Question

고정 된 왼쪽 열과 유동 오른쪽, 높이가 100 % 인 두 열 레이아웃을 다음 예제와 같이 구성하려고합니다.

지금까지 시도한 것을 기억하지 못하는 수많은 변형을 시도해 보았습니다. 나는 또한 LayoutGala과 같은 웹 사이트를 보았지만 100 % 높이의 두 열이있는 예는 없습니다.

내가 이미 시도한 것을 기억할 수는 없지만 이것이 확실히 마지막 시도였습니다. 내가 아파트 블록의 4 층에서 컴퓨터 모니터를 던져서 체포되기 전에 이것이 마지막으로 방문한 웹 페이지 였기 때문에 나는 이것을 안다.

MyFiddle

내가 그래서 전체 화면 유체 레이아웃에 왔을 때, 완전히 나를 던졌다, 제 960 넓은 중심의 웹 사이트에 사용 해요 :

body { margin:0; padding:0; } 
.left-column { position:absolute; top:0; width:235px; height:100%; background:#090909; } 
.right-column { margin-left:235px; background:yellow; height:100%; width:100%; } 


<div class="page-wrapper"> 
    <div class="left-column"></div> 
    <div class="right-columnr"> 
     sd 
    </div> 
</div> 

이 여기 결과입니다. 어떤 도움이라도 대단히 감사합니다.

Answer 1

첫째, 둘째, right-columnr 오타를 수정해야 화면의 전체 높이를 차지하는 요소의 100%이면 부모의 높이는 100%이어야합니다 :

CSS :

html, body { 
  height: 100%; 
  width: 100%; 
  padding: 0; 
  margin: 0; 
} 

.page-wrapper { 
    height: 100%; 
    position: relative; 
} 

.left-column { 
    position:fixed; /* <-- fixes the left panel to prevent from scrolling */ 
    top:0; 
    left:0; 
    width:235px; 
    height:100%; 
    background:#090909; 
} 

.right-column { 
    margin-left:235px; 
    background:yellow; 
    min-height:100%; /* <-- fixes the background-color issue when content grows */ 
} 

HTML : 솔루션 당신이 숨겨진에 오버 플로우를 설정하는 많은 있기 때문에 도움이되지 않습니다

<div class="page-wrapper"> 
    <div class="left-column"></div> 
    <div class="right-column"> 
    This is the content. 
    </div> 
</div> 

JSBin Demo

Answer 2

IF 열을 100 %로 설정하려면 body 및 html 요소에 100 % 높이를 설정해야합니다.

이 작동 :

html {height: 100%} 
body {height: 100%} 
.page-wrapper {height: 100%} /* This element is redundant unless You know You will need it in future for something */ 
.left-column {float: left; width: 235px; height: 100%} 
.right-column {overflow: hidden; height: 100%} 

편집 : 귀하의 코드를 기반으로

데모 : 당신의 높이를 설정할 때 : http://jsfiddle.net/YL8Eh/