2014-10-15 5 views
1

부모 div가 클래스 row-fluid이고 부모 div와 동일한 높이가되도록하고 싶습니다. 파란색 영역은자식 div를 부모 요소와 동일한 높이로 만듭니다.

enter image description here

내 부모 DIV이고 빨간색, 노란색 : 여기

.row-fluid{ 
    float: left; 
    width: 100%; 
    background: blue; 
} 


.row-fluid > .span2{ 
    float: left; 
    width: 23.076923076923077%; 
    background: red; 
} 

.row-fluid > .span7{ 
    float: left; 
    width: 48.5%; 
    background: yellow; 
} 


.row-fluid > .span3{ 
    float: left; 
    background: green; 
} 

내 된 div를 보여 이미지입니다 : 여기
<div class="row-fluid">  
    <div class="span2">    
    </div>  
    <div class="span7">    
    </div>  
    <div class="span3">          
    </div> 
</div> 

내 CSS 코드입니다 녹색 영역은 자식 div에 해당합니다.

+0

부모를 위해'display : table'을 사용하고 아이들을 위해'display : table-cell'을 사용하십시오. – Pete

+0

'.childDiv {Height : 100 %;}'는 작동합니까? –

+0

@ Pete -> 나는 당신이 말한 것을 시도했지만, 그것은 작동하지 않습니다. –

답변

1

부모님 div에서 신장을 설정하고 자녀 범위에서 height: 100%을 설정하지 않으시겠습니까?

.row-fluid { 
    height: 300px; 
} 

.row-fluid > .span2, 
.row-fluid > .span7, 
.row-fluid > .span3 { 
    height: 100%; 
} 

그렇지 않으면 this article을 살펴볼 수 있습니다.

+0

아니요, 내 사이트는 반응 적이어야합니다. –

+0

@AlyssaGono 내 편집을 확인하십시오. 어쩌면 그 기사가 도움이 될 수도 있습니다. – user1438038

관련 문제