html - div-Container 内的图像剩余高度

Question

我有以下代码:

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

我希望图像占据剩余的高度，这在 map-div 中是自由的。目前图像设置为 100%，这就是为什么它会在底部的盒子中用完。有人可以帮忙吗？谢谢!

Answer 1

为什么不使用 display:table 设置，这样做的好处是您可以在第一行添加任意多的内容，图像将占用剩余空间(表格高度减去第一行内容的剩余部分)并相应地缩放。

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