auto expand div height not working

This is my design code. Problem is I have slider in which Image sizes I have set according to screen size. But my problem is content below slider is overlapping on slider part. What should happen is in any screen below slider that content should come. If I specify the min-image size then when screen size gets reduce it leaves lot of blank space.

HTML Code.

<!--slide-part-starts--><div class="slide-part">
    <!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://ift.tt/1H67NnN'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://ift.tt/1Kq9YQx'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->

<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->

CSS

.slide-part{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:100px;
    height:100%
}

.fadein {
    position:relative; 
    width:100%; 
    max-width:1600px; 
    margin:0 auto; 
    min-height:100px;
    height:100%
}

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    height:auto; 
    max-width:100%; 
    width: auto\9;
}

.about-evio{
    width:100%;
    text-align:center;
    padding:50px 0 50px 0;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    text-align:center;
    min-height:20px;
    background:#fff;
    font-size:1.2em;
    line-height:30px
}