Here is the code snippet I am working with:
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%;
}
Currently, the image in the map-div is set to a height of 100%, causing it to overflow from the bottom. I need the image to take up the remaining free space within the map-div. Any suggestions on how to achieve this? Thanks!