menu

CodePen

Hey Everybody! Come share Pens, ask front-end coding questions, and get/give feedback with your CodePen pals

Channels
Team

child div with 100% height exceeds parent div?

December 1, 2018 at 11:58pm

child div with 100% height exceeds parent div?

December 1, 2018 at 11:58pm (Edited 9 months ago)

I feel that this is a very simple concept that I just can't get to work right. I basically want to fit two child divs together. One with a fixed height set with pixels, and another set with percentage. I want the second div to fill up the rest of the space beneath the first one, basically.

https://codepen.io/sea_level394/pen/rQPdXX

As you can see, part of the background image of the "second" div is cut off.


December 2, 2018 at 12:59am

You're using overflow:hidden that's why it's cut off but it's still 100% height. If you want the second div to fill up the rest of the space, you could use flexbox or simply calc() function like this in https://codepen.io/yuanchuan/pen/6c2b00c014768b277c40e4998326d66c/

like-fill
2
  • reply
  • like

You're using overflow:hidden that's why it's cut off but it's still 100% height. If you want the second div to fill up the rest of the space, you could use flexbox or simply calc() function like this in https://codepen.io/yuanchuan/pen/6c2b00c014768b277c40e4998326d66c/

Thankyou so much

  • reply
  • like