Image rest of height inside a div-Container

Question

I have got the following code:

HTML:

<div id="mapWrapper" style="height: 624px;">
    <div class="box" id="map">
        <h1>Campus</h1>
        <p>Description Campus Map.</p>
        <img src="abc.png">
    </div>
 </div>

CSS:

.box {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 3px;
    overflow:hidden;
    height:100%;
 }

#mapWrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    overflow: hidden;
    padding: 10px;
}

#map {
    display: inline-block;
    position: relative;
}

#map img {
     height: 100%;
}

I want the image to take the rest of the height, that is free in the map-div. Currenty the image is set to 100% and that is why it runs out of the box at the bottom. Can someone help? Thanks!

Answer 1

Why not use a display:table setup, the advantage of this is that you can add as much content as you want to the first 'row' and the image will take up the remaining space (whatever is left from the table height minus the first row of content) and scale accordingly.

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <h1>Campus</h1>
            <p>Description Campus Map.</p>
        </div>
    </div>
    <div class='row'>
        <div class='cell'></div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    table-layout:fixed;
    height:624px;
    width:100%;
    max-height:624px;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.row:first-of-type >.cell {
    height:1%;
}
.row:last-of-type >.cell {
    height:100%;
    background-image:url(http://www.gettyimages.co.uk/CMS/StaticContent/1357941082241_new_banner-700x465.jpg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
}