title: I've got a issue related with position and height auto
body: <p>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?</p>
  <p>here is HTML</p>
  <pre><code>&lt;section class=&quot;slides&quot;&gt;
      &lt;div class=&quot;slide_centent&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/images1.jpg&quot; alt=&quot;images1&quot;&gt;&lt;/a&gt;
          &lt;button class=&quot;slidesbtn1&quot;&gt;자세히 보기&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;slide_centent&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/images2.jpg&quot; alt=&quot;images2&quot;&gt;&lt;/a&gt;
          &lt;button class=&quot;slidesbtn2&quot;&gt;자세히 보기&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;slide_centent&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/images3.jpg&quot; alt=&quot;images3&quot;&gt;&lt;/a&gt;
          &lt;button class=&quot;slidesbtn3&quot;&gt;자세히 보기&lt;/button&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>Here is CSS</p>
  <pre><code>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;}
  </code></pre>