Grow your CSS skills. Land your dream job.

100% height of child when height of parent is not set?

  • # May 11, 2013 at 6:35 pm

    How to make child element fill 100% height of his parent when parents height is not set? Is it possible just with CSS?

    Thanks in advance.

    # May 11, 2013 at 6:46 pm

    You could try setting the parents position to relative (position: relative;). Then set the child’s position to absolute. You should then be able to give the child top and bottom values (top: 0; bottom: 0;) making it stretch out the entire height of the parent. However this could cause other issues such as the child’s content overflowing out of the child container.

    Hopefully this makes sense! ;D

    # May 11, 2013 at 6:53 pm

    If no height is set on a parent div it will only have the height of the child.

    So perhaps you are missing something.

    If you could create a Codepen to explain the issue we might be able to help further.

    # May 11, 2013 at 6:55 pm

    I think you need to rephrase the question. Unless a child is position: absolute or a float, the parent will encompass the child and therefore the child will be 100% of it’s parent’s height. I’m guessing you mean 100% of the viewport?

    # May 11, 2013 at 7:21 pm

    @JTParrett

    Perfectly, does exactly what i wanted. Just gave him (right: 0) because i had (float: right) on child. Thank you man.

    @wolfcry911 Yup, child was floated.

    @Paulie_D This is not a main content, it is just some kind of side bar for social buttons, names of authors and photographers.

    Thank you all, Cheers!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".