상위 요소의 높이를 높이로 설정

Question

요소 높이를 상위 요소의 100 %로 설정하려면 어떻게해야합니까?

아래 코드에서 <strong>의 높이를 100 %로 설정하려고합니다.

형제의 높이가 <div> 인 요소는 그 안에있는 텍스트의 양에 따라 바뀌므로 부모의 높이가 <li> 인 요소로 변경됩니다.

상위 <li> 요소와 관계없이 높이가 <strong> 요소 = 100 %를 찾고 있습니다.

피들에서 페이지의 왼쪽에 단일 회색 스트립 효과를 만들려면 설명 상자의 높이가 100 % 여야합니다.

*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; } 
 

 
.course-info { 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t float: left; 
 
\t width: 100%; 
 
\t margin-bottom: 2em; 
 
} 
 

 
.course-info li { 
 
\t \t width: 100%; 
 
\t \t float: left; 
 
\t  display: block; 
 
} 
 

 
.course-info div { 
 
\t float: left; 
 
\t width: 60%; 
 
} 
 

 
.course-info strong { 
 
\t width: 35%; 
 
\t float: left; 
 
\t display: block; 
 
\t background: #f4f4f4; 
 
\t color: #888; 
 
\t height: 100%; 
 
}

 
    <ul class="course-info"> 
 
     
 
     
 
    <li><strong>Description </strong> 
 
\t \t \t <div>Text here. The amount of text here varies. As it increases, the strong element on the left should increase to fill the parent li element.</div></li> 
 
    
 
    <li><strong>Participants max.</strong><div>Learn basic conversation</div></li> 
 
    
 
    <li><strong>Number of sessions</strong><div>5 Persons</div></li> 
 
    
 
\t </ul> 

Answer 1

당신은 기본적으로 당신이 뭘 하려는지 지원하는 <table>에 <ul>에서이 변환하여 쉽게이 작업을 수행 할 수 있습니다.

http://jsfiddle.net/4tjama61/

CSS

:

사용자 misterManSam는 다음 당신이 할 수있는 당신의 현재 설정을 사용하여이 작업을 수행하려면

---

아래 코멘트에 this jsbin demo이 대답의 <table> 버전을 제공

.course-info li { 
    width: 100%; 
    display: block; 
    position:relative; /* no float, add position relative */ 
} 

.course-info div { 
    margin-left:35%; /* margin-left instead of floating */ 
    width: 60%; 
} 

.course-info strong { 
    width: 35%; 
    display: block; 
    background: #f4f4f4; 
    color: #888; 
    height: 100%; 
    position:absolute; /* absolute position. No floats. positions relative to parent li */ 
} 

플로팅 요소와 height:100%은 일반 문서 플로우에서 부동 소수점이 제거되므로 함께 재생되지 않습니다. 절대 위치에있는 요소가 여백 왼쪽과 섞인 동일한 효과를 얻을 수 있습니다 (제공된 예제에서와 같이)