[英]Image rest of height inside a div-Container
I have got the following code: 我有以下代码:
HTML: 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: 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. 我希望图像占据其余的高度,在map-div中是免费的。 Currenty the image is set to 100% and that is why it runs out of the box at the bottom.
当前,图像设置为100%,这就是为什么它超出了底部的框的原因。 Can someone help?
有人可以帮忙吗? Thanks!
谢谢!
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. 为什么不使用
display:table
设置,这样做的好处是您可以在第一个“行”中添加任意数量的内容,并且图像将占用剩余空间(无论桌子高度减去第一个剩下的空间)内容行)并相应缩放。
HTML 的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 的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.