Make div expand to occupy available height of parent container

Answer 1

you can resolve by the flexbox Flexible Box Layout Module:

.tile{
   ...
   /* add the following line */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   ...
}

http://jsfiddle.net/57yLgxsx/

This example works on Chrome you can check for the browser compability on caniuse.com and then add the correct prefixes.

It depends on who you want to ensure compatibility ( last 2 vorsion of all browser, mobile or desktop or both ).

keep in mind that there are two versions of flexbox, the "old" and the "new". What I wrote above is the new.

This link can clarify some ideas https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Well, pretty easy... make <div class="move"></div> and put your h3 into it like:<div class="move"><h3>Short</h3></div> now style that move div like so:

.move{height:100px;}

it workd, you are done :)

PS: make it with both of your h3s :)

well, there is a code:

css:

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
}

.tile h3{
    min-height: 20px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    height: 162px;
    overflow: hidden;
    margin: 0 10px;
}

.move{height:100px;}

html:

<div class="tile">
    <div class="move">
    <h3>short</h3>
        </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tile">
    <div class="move">
    <h3>longLongLong longLongLong longLongLong</h3>
        </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 3

I would try another aproach. Using jquery you can calculate on window load the height of the highest h3 and then, apply that height to all your h3 inside your tiles.

I know you asked for a pure css solution, so it's ok if I don't get any credit, but I think this answer may be usefull for other users with the same problem so that's why I wrote it.

Something like this:

var maxHeight = -1;
$('.tile h3').each(function() {
    if ($(this).height() > maxHeight)
        maxHeight = $(this).height();
});
$('.tile h3').each(function() {
    $(this).height(maxHeight);
});

As you can see in this JSFIDDLE (notice I removed the fixed max-heightyou added to the header and add a third tilewith a "very long text" so you can check the exmaple better.

Answer 4

How about a fixed height:

.tile h3 {
    height: 65px;
    display: inline-block;
    overflow: hidden;
}

Or accompanied by js (jQuery):

// Height handler
var headHeight = 0;

// Iterate throug all H3s an get highest
jQuery( 'h3' ).each( function() {

    // Get current height
    var currentHeight = jQuery( this ).height();

    // If higher as handler set as handler
    if( currentHeight > headHeight ) {
        headHeight = currentHeight;   
    }

} );

// Set the height of all H3s
jQuery( 'h3' ).css( 'height', headHeight );

This would be a pretty robust solution ...

Answer 5

Depending on browser support you can use flex.

The container would need:

display: flex;
flex-flow: column;

Here's a quick demo with example markup:

http://jsbin.com/xuwina/3/edit?html,css,output

Answer 6

I would say try to position the content absolute to the bottom of the tile. In that case you can set the space where the content should end. Still you need to add an extra class to your content with the smaller title to be it larger than the other tile with the larger title.

Your HTML would be:

<div class="tile">
    <h3>short</h3>
    <!-- Added an extra class to the div -->
    <div class="content small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Within your CSS I changed this:

.tile .content{
    height: 162px;
    background-color:grey;
    overflow: hidden;
    margin: 0 10px;
    position: absolute;
    bottom:30px;
}
.tile .small{height:216px;}

And then you get this result: JSFIDDLE

Let me know if this is a solution that works for you.