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

div-Container内的图像高度剩余部分

1 个答案:

Demo Fiddle