강제로 div가 부모의 바닥에 닿도록합니다.

Question

특정 케이스에 공통적 인 문제가 있습니다 ... 플로팅 divs의 높이를 자동으로 늘려 부모의 바닥에 닿도록 강요합니다.

여기 예가 있습니다 : http://jsfiddle.net/k95nK/1/ 저의 목표는 모든 부유 기둥의 높이가 같고 응급 처치 자의 바닥을 뒤지는 것입니다. (따라서 열은 모두 내용이 가장 큰 열의 높이를 가져야합니다.) 상위의 높이를 고정시킬 수 없습니다. 내용은 부모의 높이를 증가시켜야합니다.

.content { 
width : 150px; 
background-color : #123456; 
float : left; 
margin-right : 10px 
} 

#allcontent { 
background-color : #90c89a; 
} 

#allcontent:after { 
content:""; 
display: table; 
clear: both; 
} 


<div id="allcontent"> 
    <div class="content">hello</div> 
    <div class="content">hello</br>hello</div> 
    <div class="content">hello</div> 
</div> 

나는, 이러한 유형의 솔루션 자주 묻는 알고 (How to get a div to resize its height to fit container?)하지만 난 내 특정 사건에 대한 해결책을 찾을 수 없습니다.

나는 절대 위치를 사용하려했지만,

Answer 1

당신은 100 %로 내부 DIV의 높이를 컨테이너에 높이를 넣고 설정해야합니다 ...에 보이는 문서 흐름의 외부를 만드는

, 이렇게.

#allcontent { 
    background-color: rgb(144, 200, 154); 
    height: 320px; 
} 
.content { 
    background-color: rgb(18, 52, 86); 
    float: left; 
    height: 100% !important; 
    margin-right: 10px; 
    vertical-align: top; 
    width: 150px; 
} 

편집 :

고정 높이를 사용하지 않고, 당신은 div의 사이의 간격에 대한 테두리 나 패딩을 사용해야합니다;

.content { 
    background-color: rgb(18, 52, 86); 
    display: table-cell; /* **** ADD THIS STYLE **** */ 
border-right: 20px solid rgb(144, 200, 154); /* **** Using border with same colour as background to give spacing effect **** */ 
    margin-right: 10px; 
    width: 150px; 
} 

Answer 2

floats을 사용하는 경우 두 가지 가능성이 있습니다. 그것이 테이블로 테이블

를 사용) http://jsfiddle.net/k95nK/2/

2 :

1) 여기 예 jsfiddle을 참조하십시오 모든 요소

.content { 
    height: 288px 
} 

에 대한 고정 높이를 정의 해결할 사소한 문제이지만 요즘은 오래된 기술로 간주됩니다

Answer 3

float:left을 삭제하고 내용물 div에 display:table-cell을 적용하십시오. 상자의 높이가 바닥에 정렬 상자 바닥에 나에 대한 확장을 위해

.content { 
width : 150px; 
background-color : #123456; 
display:table-cell; 
border-right:10px solid #90c89a; 
} 

DEMO