Настройка Divs для вертикального заполнения родительского

Question

Я уже некоторое время играю с этим, но не могу понять, как правильно настроить это.

Учитывая этот HTML:

<div class="item-container bottom-spacer"> 
     <div id="my-friends"><div id="2" class="user-profile-card"> 
     <img src=""> 

     <div><h3>John</h3></div> 
     <h3>Details</h3><br> 
     Date: Tuesday, June 24th 2014, 11:47 am<br> 
     Val1: 22<br> 
     Val2: 28<br> 
     <div> 
      <h3>Notes</h3><br> 
      Just some notes... 
     </div> 
     <div class="user-profile-li-buttons"><button class="delete-button" onclick="friendsPage.deleteFriend(2)">X</button></div> 

</div><div id="4" class="user-profile-card"> 
     <img src=""> 

     <div><h3>Mr User One</h3></div> 
     <h3>Details</h3><br> 
     <div> 
      <h3>Notes</h3><br> 
      Just some notes... 
     </div> 
     <div class="user-profile-li-buttons"><button class="delete-button" onclick="friendsPage.deleteFriend(4)">X</button></div> 
</div><div id="6" class="user-profile-card"> 
     <img src=""> 

     <div><h3>Mr User Two</h3></div> 
     <h3>Details</h3><br> 
     Date: Tuesday, June 24th 2014, 6:30 pm<br> 
     Val1: 31<br> 
     Val2: 20<br> 
     <div> 
      <h3>Notes</h3><br> 
      Just some notes... 
     </div> 
     <div class="user-profile-li-buttons"><button class="delete-button" onclick="friendsPage.deleteFriend(6)">X</button></div> 
</div></div> 
     <div class="clear-fix"></div> 
    </div> 

И некоторые CSS:

.item-container { 
    padding: 20px; 
    border: 0 #fff solid; 
    background: #ccc; 
    box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    border-radius: 0.3ex; 
    -webkit-border-radius: 0.3ex; 
    -moz-border-radius: 0.3ex; 
    overflow: auto; 
    height:100%; 
} 

#my-friends { 
    height: inherit; 
} 

.user-profile-card { 
    overflow: hidden; 
    background: #333; 
    color: #fff; 
    border-radius: 0.3ex; 
    -webkit-border-radius: 0.3ex; 
    -moz-border-radius: 0.3ex; 
    margin: 5px; 
    float: left; 
    font-size: 0.8em; 
    width: 160px; 
    padding: 5px; 
    height: 100%; 
} 

Первоначально я думал, что это потому, что я динамически добавлять содержимое HTML с JQuery, но после того, как построили JsFiddle кажется Я тоже ошибался.

Как заставить эти внутренние divs правильно вертикально растягиваться, чтобы заполнить родительский div?

скрипку здесь:

http://jsfiddle.net/

Answer 1

Просто добавьте display:table в #myfriends

jsFiddle example

Answer 2

высота 100% работает только тогда, когда родительский элемент применяется имеет высоту.

, поэтому вам необходимо применить высоту до html,body элементов.

Fiddle Demo

html,body{ 
    height:100% 
} 
.item-container { 
    padding: 20px; 
    border: 0 #fff solid; 
    background: #ccc; 
    box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    border-radius: 0.3ex; 
    -webkit-border-radius: 0.3ex; 
    -moz-border-radius: 0.3ex; 
    overflow: auto; 
    height:100%; 
} 
#my-friends { 
    height: inherit; 
} 
.user-profile-card { 
    overflow: hidden; 
    background: #333; 
    color: #fff; 
    border-radius: 0.3ex; 
    -webkit-border-radius: 0.3ex; 
    -moz-border-radius: 0.3ex; 
    margin: 5px; 
    float: left; 
    font-size: 0.8em; 
    width: 160px; 
    padding: 5px; 
    height: 100%; 
}