Setting div height to 100% results in zero height

Question

html

<div class="elementor-testimonial__footer">
    <div class="elementor-testimonial__image"> 
        <img src="https://roommi-tw.com/wp-content/uploads/room4.jpg">
    </div>
</div>

css

.elementor-testimonial__footer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 66.67%;
    overflow: hidden;
}
.elementor-testimonial__image {
    width: 100%;
    height: 100%; // something weird just happened
}
elementor-testimonial__image img {
    width: 100%;
}

I set the height of the .elementor-testimonial__image div 100%, but the result rendered is 0%.

So I removed the code:

.elementor-testimonial__image {
    width: 100%;
    height: 100%;
}

After removing those lines, something weird just happened: the position of the image is change as you can see in the picture below.

Can anyone please explain this to me? Thank you!

#test-container {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
}
.elementor-testimonial__footer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 66.67%;
  overflow: hidden;
  margin-bottom: 18px;
}
.elementor-testimonial__image {
 width: 100%;
  height: 100%;
}
.elementor-testimonial__image img {
 width: 100%;
}


Edited: This is a brief code I captured from the Wordpress template but the result seems fine. I guess there are some code that has conflict but I still cannot find out... (Still working on it!)

<div id="test-container">
  <div class="elementor-testimonial__footer">
    <div class="elementor-testimonial__image">
      <img src="https://roommi-tw.com/wp-content/uploads/room4.jpg">
    </div> 
  </div>
  <div class="elementor-testimonial__content">
    
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal     
  </div>
</div>

your parent container height is set to 0 and all your seeing is the 66.67% padding. — Jonny, Jan 18 '19 at 04:10
Hello @hayley add a code jsfiddle link. We will understand Thanks :) — Developer Tanbir, Jan 18 '19 at 04:20
100% won't work on a div without any content. Are those background images? — Nathaniel Flick, Jan 18 '19 at 05:27
@Jonny @NathanielFlick I forgot adding `position: absolute;` to the child element... — hayley, Jan 18 '19 at 07:02

score 1 · Answer 1 · answered Jan 18 '19 at 05:05

As already mentioned, the 100% height of div .elementor-testimonial__image has no effect (100% of 0px). But the image is visible, because it overflows its parent container using the picture's height.

Additionally:

Add missing dot (".") to class selector elementor-testimonial__image img (if you want to use it)
Always use /* .... */-style comments in CSS. Just because // works in most browsers doesn't mean it's correct.

Setting div height to 100% results in zero height

1 Answers1