Div 100% высота родителя

Question

Несмотря на то, что, глядя на различные ответы SO, ничего не работает. У меня есть:

<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="icons"> 
       // icons 
      </div> 
     </div> 
    </div> 
</footer> 

Контейнер иконки должен быть 100% высота строки, но я не могу за жизнь мне получить его на работу. См. Ниже, темно-синий должен быть снизу, но я не могу заставить его работать. Помогите?

ОТВЕТ: После долгого возился (фиксированные высоты никогда не были ответ) Я выбрал Единый Истинный метод компоновки, чтобы получить равные высоты на моих двойниках контейнерах: Установка http://css-tricks.com/fluid-width-equal-height-columns/

Answer 1

Try position:relative; на контейнере/родителе. А затем height:100%; на содержащем элементе.

Если этот родитель не является высотой 100%, которая устанавливает, что родители имеют высоту до 100%, а родительский родитель - относительный. продолжить вверх, пока вы получите ваш рост

Answer 2

Footer/Icons Fiddle

Контейнер (row) должен иметь высоту, указанную затем отрегулировать высоту icon Див на 100%.

.row { 
    background: blue; 
    height: 250px; /* set the height of the row */ 
} 
.icons { 
    background: lightblue; 
    height: 100%; /*set to 100% to adjust to the row height */ 
} 

Answer 3

Надежда моя скрипка работает для вас http://jsfiddle.net/Tushar490/zh27nfzz/

HTML: -

<div class="container"> 
    <div class="row"> 
     <div class="icons"> 
      <ul><li>Facebook</li> 
       <li>Twitter</li>  
       <li>Pinterest</li> 
       <li>Instagram</li> 
     </div> 
    </div> 
    </div> 

CSS: -

.container{ 
width:500px; 
height:200px; 
border:1px solid; 
background-color: skyblue; 
} 

.row{ 
padding-left:4px; 
} 

.icons{ 
border:1px solid; 
width:490px; 
background-color: darkviolet; 
height: 199px; 
}