div容器內圖像的其余高度

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設置，這樣做的好處是您可以在第一個“行”中添加任意數量的內容，並且圖像將占用剩余空間（無論桌子高度減去第一個剩下的空間）內容行）並相應縮放。

演示小提琴

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