멀티 컬럼 CSS 최소 높이 100 %

Question

내 페이지의 열 설정을 돕기 위해 guide을 따라했습니다.

내가하려는 것은 화면이 콘텐츠보다 크면 화면을 가득 채우지 만 콘텐츠가 브라우저 화면보다 오래 표시되면 기본 오버플로 스크롤을 사용하거나 자동.

현재 몸체, 컨테이너 (기사에 설명 된 컨테이너 주변의 div) 및 기사에 설명 된 컨테이너가 높이 : 100 %로 설정되어 있습니다. 페이지가 모든 내용에 맞을 때 좋지만 화면이 너무 작 으면 내용이 잘립니다.

본체 또는 컨테이너를 최소 높이 100 %로 변경하여이 문제를 해결해 보았습니다. 작은 화면에서 모든 것을 다시 표시하지만, 큰 화면에서는 "배경"열이 하단으로 확장되지 않습니다 페이지의, 그러나 나의 콘테이너는한다.

편집 : 내 html 및 본문도 현재 높이 100 %로 설정됩니다.

Edit2가 : 나는

같을 않습니다 싶습니다

body (height: 100%) 
    my_container (height: 100%) 
     container2 (height: 100%) 
      container1 (height: 100%) 
       column1 
       column2 

: 여기가 내용이 화면

보다 큰 경우 어떻게 생겼는지에 대한 jsfiddle의 지금 구조 뭔가처럼

body 
    my_container (min-height: 100%) 
     container2 (height: 100%) 
      container1 (height: 100%) 
       column1 
       column2 

Answer 1

그냥 높이 : 100 %; 귀하의 CSS에서.

http://jsfiddle.net/8DNmh/2/