최소 높이가 3 열 레이아웃

Question

three column layout을 minimum 100% height으로 작성하는 방법은 scroll with page입니다.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4"></div> 
     <div class="col-sm-4"></div> 
     <div class="col-sm-4"></div> 
    </div> 
</div> 

나는 최소한 height of 100%를 제공하고 scroll with page을 가지고하는 방법을 모르겠습니다.

Answer 1

Basicly을, 테이블 레이아웃을 사용 display 속성은 잘 있습니다 :이 같은 DEMO

html, body, .container { 
    height:100%; 
    width:100%; 
    margin:0; 
    background:lightgray 
} 
.container { 
    display:table; 
    border-spacing:0.5em; 
} 
.row { 
    display:table-row; 
} 
.col-sm-4 { 
    display:table-cell; 
    background:white; 
} 

Answer 2

100 % 높이의 컨테이너가 문서 본문 안에있는 경우 문서 본문과 html 요소가 둘 다 100 % 높이로 확장되는지 확인하십시오.

귀하의 CSS를 이런 식으로 뭔가가 있어야합니다

html, body { 
    height: 100%; 
} 

Answer 3

뭔가 :

html,body {height:100%;margin:0;background:#eee} 
.container {height:100%} 
.row {overflow:auto;height:100%;} 
.col-sm-4 {height:100%;float:left;background:white;margin:0 1%;width:31.3333%} 

http://jsfiddle.net/S379x/