DIVs {height: 100%; } Inheriting Grandparent's Height And Overflowing Parent's Height

I am encountering some problems with div.images when trying to set {height: 100%; }: computed height does not equal the parent div#placeholder's height, but the grandparent div#hom

Solution 1:

I edited the following id's - is this the effect you were after?

div#placeholder {
    height: 100%;
    background-color: #0f0;
}
div#placeholder div.images {
    left: 5%;
    margin: 5px 0;
    width: 90%;
    height: 100%;
    min-height: 200px;
    background-color: #ccc;
}

Solution 2:

The code should be rewritten as:

<div id="placeholder">
    <div id="wrapper">
        <div class="images"></div>
        <div class="images"></div>
        <div class="images"></div>
    </div>
</div>

The div#wrapper needs the following styles:

div#wrapper {
    display: table-cell; 
    position: relative; }