CODEWITHSUNDEEP
css
RobVious
RobVious

Reputation: 12915

How to get a child element to size according to parent's min-height?

In the following fiddle:

http://jsfiddle.net/6qF7Q/1/

I have a yellow content area that has a min-height set to 100% - it's the background div to all pages and should take up at least 100% of the available height. If there's overflow, it expands vertically.

Then, within that yellow container, I have another child div (red) that I would like to take up as much vertical space as its parent. It seems I can't set height because the parent element only has min-height, and setting min-height on the red element doesn't work either.

So right now, the yellow is behaving as I'd like, but the red is not expanding. How can this be achieved with CSS only?

CSS: 

.browser {
    background-color: blue;
    height: 600px;
    width: 200px;
    position: relative;
}
.innercontent {
    min-height: 100%;
    background-color: red;
    width: 100%;
    color: white;
    padding: 2px;

}
.content {
    background-color: yellow;
    width: 100%;
    min-height: calc(100% - 30px);
}
.footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: orange;
    height: 20px;
}

HTML: 

<div class="browser">
    <div class="content">
        <div class="innercontent">
            This is the problem - I need this to take up 100% of the remaining yellow space, without setting the parent element's 'height' - only min-height is specified in the parent because I need to make sure that it takes up 100% of the height at least, but allow it to extend vertically if there's any overflow.  
        </div>
        should not see any yellow
    </div>
    <div class="footer"></div>
</div>

Upvotes: 0

Views: 1474

Answers (2)

stridlinnea
stridlinnea

Reputation: 11

I think this might solve your issue?

I have changed the innercontent to position: absolute

http://jsfiddle.net/6qF7Q/7/

If you have text in the yellow section it will always show. Also, you're going to have to do a bit of fiddling to get your footer positioned correctly since you are going to have an overflowing absolute element. I think a full body position: relative wrapper will solve it.

P.S I don't see why you would need a .content AND a .innercontent if you don't want the .content to show?

This works much better and doesn't give you footer grief: http://jsfiddle.net/6qF7Q/9/

Upvotes: 0

Andr&#233; Junges
Andr&#233; Junges

Reputation: 5347

Take a look at this

I added this

*{
    box-sizing: border-box;
}
html, body {
  /* Make the body to be as tall as browser window */
  height: 100%;
}

and changed some attributes u can see at fiddle

If thats what you want you should read this article http://css-tricks.com/a-couple-of-use-cases-for-calc/ I made that based in this use-cases

Upvotes: 1

Related Questions