CODEWITHSUNDEEP
htmlcssheight
timeSmith
timeSmith

Reputation: 572

Shrink an element's height to match its parent using CSS

I'd like to shrink the height of one element to match its sibling's height; the siblings height is dynamic. Put another way I'd like to have one, variable height, element forced to shrink its height to fit the height its parent would have if the child was not there.

<div class="parent">
    <div class="shrunk_element">
        <span style="color: red;" >If I was really tall I sure wish I could shrink to match the height of my sibling</span>
    </div>
    <div class="sibling" style="width: 60%;">
        <img src="http://dummyimage.com/384x216/000/fff?text=variable+width+consistant+aspect+ratio" style="width: 100%;"/>
    </div>
</div>

Here is a more complete but still non working as desired example http://jsfiddle.net/thisma/k3ngo1mg/3/ And here's an example that works but uses javascript and jQuery http://jsfiddle.net/thisma/k3ngo1mg/5/

Upvotes: 0

Views: 1838

Answers (1)

NoGray
NoGray

Reputation: 1149

You can set the parent position to relative, push the image to the right (using margin for example) and set the content to absolute with the top and bottom set to zero. Setting the top and bottom to zero will stretch the div to fit the parent.

http://jsfiddle.net/k3ngo1mg/7/

.parent {position:relative;}

.width_constraint {
    width: 60%;
    margin-left:40%; /* pushing the element to the right */
    display: inline-block;
    max-width: 500px;
}
.ratio_enforcer {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}
.fake_iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    outline: 1px solid red;
}

.matched_content {
    width:39%;
    display: inline-block;
    overflow-y: scroll;
    position:absolute; /* setting the element to absolute */
    top:0px;           /* and setting the height to fit the parent */
    bottom:0px;
    left:0px;
}
div {
    vertical-align: top;
}

Upvotes: 1

Related Questions