划分100％父母的身高

Question

尽管看到各种不同的SO答案似乎没有任何效果。我有：

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

图标容器需要100％高度的行，但我不能为我的生活让它工作。见下文，深蓝色应该转到底部，但我不能让它工作。帮助

解答： 经过多次搞乱（固定高度从来都不是答案）我选择了One True Layout方法在我的兄弟容器上达到相同的高度：http://css-tricks.com/fluid-width-equal-height-columns/

Answer 1

Footer/Icons Fiddle

容器（row）必须指定高度，然后将icon div的高度调整为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 2

尝试在容器/父级上设置position:relative;。然后在所包含的元素上height:100%;。

如果该父级不是100％高度，则将父级高度设置为100％并且父级父级为positio相对。继续向上直到你达到高度

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;
}