CODEWITHSUNDEEP
css
William Wino
William Wino

Reputation: 3829

Make a div's height matches its parent div's height which is set auto

This is really simple, yet I don't know how to solve this

<html>
    <body>
        <div style="width:500px; background:black;">
            <div style="display:inline-block; width:200px; height:300px; background:yellow;"></div>
            <div style="display:inline-block; vertical-align: top; width:100px; height:100%; background:pink;"></div>
        </div>
    </body>
</html>

Here's my fiddle : Fiddle

I want the pink div's height matches the black div's which is set auto.

Edit: actually I want to match the pink height to the yellow one so that the black's height matches the yellow's also.

Upvotes: 0

Views: 87

Answers (2)

badAdviceGuy
badAdviceGuy

Reputation: 2090

Setting the height in the wrapper div and letting the children containers inherit the height is could work for you.

html:

<html>
    <body>
        <div class="black">
            <div class="yellow"></div>
            <div class="pink"></div>
        </div>
    </body>
</html>

CSS:

    .black{
        width: 500px;
        height: 300px;
        background: black;
    }
    .black div {
         display: inline-block;
        width: 200px;
        height: inherit;
    }

    .yellow{
        background: yellow;
    }
    .pink {
        background: pink;
    }

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106078

position:absolute could be an answer.

<html style="height:100%;">

    <body style="height:auto;position:relative;">
        <div style="width:500px; height:100%; background:black;">
            <div style="display:inline-block; width:200px; height:300px; background:yellow;"></div>
            <div style="display:inline-block; vertical-align: top; width:100px; height:100%; background:pink;position:absolute;
left:100px;
margin-left:0.25em;
top:0;
bottom:0;"></div>
        </div>
    </body>

</html>

http://jsfiddle.net/QG572/2/

Or use display:table to keep everything in the flow:

<html style="height:100%;">

    <body style="">
        <div style="width:500px; height:100%;display:table; background:black;">
            <div style="display:table-cell; width:200px; height:300px; background:yellow;"></div>
            <div style="display:table-cell; vertical-align: top; width:100px; height:100%; background:pink;"></div>
            <div style="display:table-cell;"><!-- to fill 100px left--></div>
        </div>
    </body>

</html>

http://jsfiddle.net/QG572/3/

Upvotes: 2

Related Questions