0

I've made responsible web slide img with 3 parts of div, give them(.slide_centent) position absolute and the parent(.slides) position relative, after that the parent(.slides) doesn't have height anymore. i give it px,% height but when i reduce browser only div(.slide_centent) become reduce together with images, parent(.slides)' bottom fixed at the point, it make huge black which not look so good. any ideas?

here is HTML

<section class="slides">
    <div class="slide_centent">
        <a href="#"><img src="images/images1.jpg" alt="images1"></a>
        <button class="slidesbtn1">자세히 보기</button>
    </div>
    <div class="slide_centent">
        <a href="#"><img src="images/images2.jpg" alt="images2"></a>
        <button class="slidesbtn2">자세히 보기</button>
    </div>
    <div class="slide_centent">
        <a href="#"><img src="images/images3.jpg" alt="images3"></a>
        <button class="slidesbtn3">자세히 보기</button>
    </div>
</section>

Here is CSS

section.slides {
     width: 100%; 
     height: auto; 
     position: relative; 
}

section .slide_centent{
     width: 100%;
     position: absolute; 
     transition: all 3s;
 }
section .slide_centent img{ 
     width: 100%; 
     height: 100%; 
     min-width: 1500px;}
Seo-tech
  • 23
  • 4

1 Answers1

0

When you add position absolute to an element, you remove it from the flow of the page, so other elements are 'unaware' of its presence. In your case, the 'slides' won't know about the 'slides_centent' (because 'slides_ceneten' is out of the flow of the page), and can't keep the height of children. I think it would be better to try to avoid position absolute in this case, but there are some things you could try.

Take a look here: Make absolute positioned div expand parent div height

flpfar
  • 106
  • 4