CODEWITHSUNDEEP
htmlcss
tellob
tellob

Reputation: 1240

Let div with image get rest of available height

I have got a div-Container with a Heading and subtitle inside. Under these components I want to insert an image, that shall take the rest of the height, that is available and scales proportionally.

I tried many things, also the one with the tables. Nothing worked for me.

<div id="mapWrapper">

<div class="box" id="map">

    <div style="display: table;">

        <div style="display: table-row;">
            <h1>Heading</h1>
            <p>Some subtitle.</p>
        </div>

        <div style="display: table-row;">
            <img src="http://www.gettyimages.de/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg" />
        </div>

    </div>

</div>


body {
    background-color: red;
}

.box {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 3px;
    overflow:hidden;
}

#mapWrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    background: green;
    padding: 5px;
    height: 200px;
    overflow: hidden;
 }

 #map {
     height: 100%;
 }

I inserted my code on jsfiddle: http://jsfiddle.net/47J9s/

Would be great if someone has got a solution for this.

Upvotes: 1

Views: 78

Answers (1)

Alex Char
Alex Char

Reputation: 33218

You have to remove height:

#mapWrapper {
position: absolute;
top: 0px;
left: 0px;
text-align: center;
background: green;
padding: 5px;
/* height: 200px; */
overflow: hidden;
}

After comment:

css

body {
    background-color: red;
}

.box {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 3px;
    overflow:hidden;
}

    #mapWrapper {
        position: absolute;
        top: 0px;
        left: 0px;
        text-align: center;
        background: green;
        padding: 5px;
        overflow: hidden;
        height:200px;
    }

    #map {
        height: 100%;
    }

    img{
        height: 85px;
        width: 620px;
    }

fiddle

Upvotes: 1

Related Questions