Forums

Hi,

I think I may be the one of the 1000’s looking for this answer..
I have a dynamic website that I am trying to get a 100% height div inside another div with the class=table-cell

I have setup a JSFiddle at http://jsfiddle.net/RedEarthDesigns/uwXf6/3/

HTML

<div class="div-table">
        <div class="div-row">
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p> <p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
        </div>
    <div class="div-row">
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p> <p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
        </div>
    <div class="div-row">
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p> <p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
            <div class="div-td venue"><div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span></div></div>
        </div>
</div>

CSS

#content-venues .div-table {
    display:table;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border-collapse:collapse;
}

#content-venues .div-row {
    display:table-row;
}

#content-venues .div-td {
    display:table-cell;
    height:33%;
    width:20%;
    text-align:right;
    vertical-align:bottom;
    overflow:hidden;
}

.hidden span {
    height:100%;
    min-height:100%;
    width:auto;
    vertical-align:text-bottom;
    padding:10px;
    transform:translate(9999px);
    opacity:0;
}

.hidden:hover span {
    height:100%;
    min-height:100%;
    width:auto;
    vertical-align:text-bottom;
    padding:10px;
    display:block;
    transform:translate(0);
    opacity:1;
}

.venue {
    background-image:url(../img/venue.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat:no-repeat;
}

#content-venues .div-td:hover {
    background-image:none;
}

Any help would be greatly appreciated..